Zastąpienie tekstu HTML obrazkiem z pomocą CSS

Czas czytania: 2 minut

Dzisiaj pokażę wam jak zastąpić zwykły tekst napisany w HTML (np. na przycisku) obrazkiem bez wprowadzania zmian bezpośrednio w kodzie strony.

Tak jak już wspomniałam nie będziemy nic zmieniać w HTML, PHP czy JS, ale z pomocą samego CSS. Teraz z pewnością spytacie „po co nam właściwie ta umiejętność”. Zapewne w przypadku kiedy możemy ingerować bezpośrednio w kod HTLM jest ona zbędna. Jednak bardzo często, zdarza się że nie możemy lub nie chcemy ingerować bezpośrednio w ten kod.

Dobrym przykładem jest tutaj np. modyfikacja wtyczki do jakiegoś sytemu CMS. Teoretycznie możemy coś w niej zmienić, jednak każda jej późniejsza aktualizacja spowoduje utratę wprowadzonej zmiany.

Zastępujemy dowolny tekst, wybranym przez nas obrazkiem

Takim dobrym przykładem gdzie ostatnio zdarzyło mnie się podmienić tekst obrazkiem jest poniższy przycisk:

Prawdę mówiąc w tym wypadku teoretycznie mogłam spróbować wstawić normalnie obrazek. Jednak umieszczenie go z pomocą CSS było w tej konkretnej sytuacji łatwiejszym i szybszym rozwiązaniem.

kod html tego obiektu:

<a href="index.php" target="_self"><span>sprawdź</span></a>

Jak widać tak naprawdę jest to link (anchor) prowadzący w pewne miejsce. Tak więc jak usunąć z niego tekst tak by zaczął się prezentować jak na grafice?

Ukrywanie tekstu umieszczonego pomiędzy znacznikami <span>

Dużym ułatwieniem jest umiejscowienie napisu pomiędzy znacznikami <span>. W tym bowiem wypadku możemy użyć kodu:

a{
    background-image: url(../images/image.jpg);
    background-repeat: no-repeat;
    width: 40px;
    height: 43px;
    display: block;
}
span{
    display: none;
}

W ten o to sposób ukryliśmy tekst i zostało nam jedynie tło o wymiarach 40px na 43px. I to właśnie wyświetla się na obrazku!

Przesunięcie tekstu z text-indent

Tym razem spróbujemy ukryć nasz tekst z właściwością text-indent oraz overflow. Z ich pomocą wysuniemy text z pola widzenia użytkownika witryny.

a {
    background:url(mojobraz.jpg) 0 0 no-repeat;
    display:block;
    width:200px;
    height:200px;
    text-indent:-99999em;
    overflow:hidden;
}

A tak to wygląda w praktyce (oczywiście po drobnych zmianach graficznych):

See the Pen Replace Text with IMG by Aura (@Julka85) on CodePen.0

Te dwa przykłady stanowią punkt wejściowy do wielu innych ciekawych rozwiązań w CSS.