[CSS]Obrazek zamiast tekstu, czyli image-replacement
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
Aby zastosować image-replacement dla poniższego kodu:
<h1>Tekst ukrywany przez obrazek</h1> |
Należy użyć następującego kodowania CSS (wymiary dla każdego z Was mogą być inne):
h1 { width: 256px; height: 41px; background-image: url(image.gif); font-size: 100%; } h1 span { display: block; position: relative; z-index: 1; margin-bottom: -41px; } |
Taki sposób zapisania wyświetlania elementu sprawia, że znajduje się nad elementem, a tekst nie pojawia się pod obrazkiem. Dodatkowo, wykorzystałem:
h1 { overflow: hidden; } |
Aby ukryć tekst ze znacznie powiększoną czcionką, jaki mógłby się w tym miejscu pojawić.
Mam nadzieję, że ta porada pomogła Wam rozwiązać problem z image-replacement.
O autorze
