Image Replacement

Tworząc rożnego rodzaju strony www często napotykamy konieczność podmiany tekstu obrazkiem – np. umieszczając logo strony lub niestandardowy nagłówek. Moglibyśmy użyć do tego znacznika img, ale ten sposób nie jest przyjazny użytkownikom ani SEO friendly. Z pomocą przychodzi CSS.


Jest wiele technik radzenia sobie z tym problem. Przedstawię dwie najprostsze i chyba obecnie najpopularniejsze.

1. sposób

<h1>Image Replacement</h1>

h1{
    background: url('images/header.png') no-repeat;
    height: 150px;
    width: 250px;
    text-indent: -9999em;
}

Założenia tej techniki są bardzo proste: dodaje do elementu tło z obrazkiem i wyrzuca z niego tekst gdzieś poza ekran.

2. sposób

<h1>Image Replacement</h1>

h1{
    background: url('images/header.png') no-repeat;
    height: 150px;
    width: 250px;
    font-size:0;
}

W drugim sposobie wystarczy nadać atrybutowi font-size zerową wartość. Osobiście preferuję tę metodę.

Zakończenie

Image Replacment jest bardzo prostą techniką używaną przez projektantów stron www, ale jest bardzo przydatna. Zamiast dodawać logo za pomocą img możemy dodać nagłówek h1 z nazwą strony.

Aktualizacja

Ze stosowaniem techniki Tmage Replacement trzeba jednak uważać. Używanie tej metody może spowodować ban od Google.

Print Friendly, PDF & Email