Hotová řešení > Text překrytý obrázkem

Text překrytý obrázkem

Následující řešení využijeme, pokud chceme například nadpis (druhé úrovně) mít jako obrázek, jelikož za pomoci CSS bychom takového vzhledu nedosáhli. Pokud se obrázek nenačte, měla by být na stránce textová alternativa. Řešení pomocí tagu img a altu není zrovna nejlepší. Podíváme se tedy, jak na to…

Chceme mít následující obrázek jako nadpis.

Povídání o žížalce

Nadpisu nastavíme position: relative, která do něj zavede souřadnicový systém. Na nulté souřadnice nadpisu pak „nalepíme“ pomocí position: absolute prvek span nesoucí obrázek.

Velikost textu bychom měli volit tak, aby se při běžném zobrazení do rozměrů obrázku vešel. Pokud bychom ji volili zbytečně velkou, mohl by být text po vypnutí obrázků zbytečně schovaný, kvůli overflow: hidden, které v nadpise zajišťuje, aby text, který je pod obrázkem, při případném zvětšení nevytékal zpod okrajů obrázku.

CSS

#o-zizalce {
  margin: 0; padding: 0;
  position: relative;
  overflow: hidden;
  font-size: 160%;
  }

#o-zizalce, #o-zizalce span {
  width: 311px; height: 43px;
  }

#o-zizalce span {
  background: url("povidani-o-zizalce.gif") no-repeat 0 0;
  display: block;
  position: absolute;
  top: 0; left: 0;
  }


HTML

<h2 id="o-zizalce">Povídání o žížalce<span> </span></h2>

Výsledek v prohlížeči

Stáhnout uvedené řešení ↓ (ZIP, staženo 1179×)

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist