Skip to Content

Skrytí textu za obrázkem (za pozadím)

Stalo se vám někdy, že jste potřebovali do stránky místo obyčejného textu vložit nějaký estetičtější objekt? Taková situace nastává poměrně často, ale přesto by se skrytí nějakého textu mělo používat co nejméně a co nejopatrněji. Měli bychom se tohoto vyvarovat zvláště v případě skrytých účelových textů např. pro zvýšení návštěvnosti a pozici ve vyhledávačích. Proto pro optimalizaci nepoužívejte např. žádných skrytých odkazů, neboť při jejich zjištění dochází k penalizaci ze strany internetových vyhledávačů.

V našem příkladě se jedná o text, který je určen nejen vyhledávačům, ale i návštěvníkům, třeba těm, kteří používají hlasové čtečky obrazovky. Tato metoda, která se nazývá Gilderlevinova metoda, je také dobře použitelná i v případě, kdy jsou obrázky vypnuty a CSS zapnuto. Takže i když jsou obrázky vyplé, taxt je dobře vidět. Obrázek, který je použit na pozadí prvku span, nesmí být průhledný, jelikož by text prosvítal. Celá metoda využívá výhody pozicování - připomeňme si, že v relativním pozicování posunujeme objekt vůči jeho původní poloze nastavením relativních souřadnic, kdežto v absolutním pozicování je tento prvek úplně vyjmut z toku dokumentu (neovlivňuje sám okolí), ale on sám je závislý a pozicován vůči svému nejbližšímu pozicovanému předchůdci. Pokud takový prvek nemá pozicovaného předchůdce, bude pozicován vůči původnímu omezujícímu bloku např. ploše klienta či prvku <body>. Vztahy mezi relativně a absolutně pozicovanými prvky jsme také využili k řešení klikacích map v kapitole Obrazové mapy.

Příklad:

Html:

<h3 id="header">
<span></span>Nějaký text
</h3>

Css:

#header {
width: 330px;
height: 25px;
position: relative;
}
#header span {
background: url(pozadi.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}