chevron-left chevron-right

[CSS]Obrazek zamiast tekstu, czyli image-replacement

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.

  • igor

    w kodzie html brakuje Ci znacznika 🙂
    Fajnie że po polsku 🙂

    Może przedstawisz/wymyślisz jeszcze inną metodę, która będzie działać w kombinacjach css off/images on, images off/css on 🙂

    Chociaż mało kto wyłącza css , ale obrazki już często , więc przydałoby się żeby wtedy ten span był widoczny 🙂

    Dobra robota 🙂
    Pozdrawiam i powodzenia 🙂

  • dzięki za wskazanie przeoczenia
    co do kolejnych metod, to myślę, że będą przedstawione w najbliższym czasie 🙂