Atypické obrázkové pozadí
Chci-li na stránce použít u nějakého bloku textu vykreslení konkrétním, třeba i neobvyklým písmem a přeji si, aby to stejně viděli i uživatelé bez nainstalovaného daného písma, jediným řešením je spolehnout se na obrázek. Co když má ale čtenář vypnuté zobrazování obrázků nebo jeho zařízení nepodporuje styly? Viděl by jen prázdný obdélník. Na webu Petra Staníčka jsem nalezla chytré řešení, kde vlastní text je překrytý obrázkem a v případě zakázaných obrázků vykoukne ven. Ale ouha, můj zvolený obrázek má místy průhledné okraje, kudy text nepěkně prosvítá ven.
Musela jsem pečlivě volit pozicování obrázku na pozadí a vypustit overflow: hidden, kteréžto nepříjemně ořízlo levý a horní okraj obrázku. Hlavní obalový prvek <div> má nastaveno position: relative a prázdný prvek <span> position: absolute. A právě tomuto <span>u se přiděluje obrázkové pozadí. Nestáhl se obrázek? Nevadí, čitelná textová alternativa zůstává.
Člověče, jenž postojíš
a vybereš si psíka,
co v boudě osamocen
pláče a naříká:
pejsek k Tobě vzhlížet bude
obdivně a rád,
s ním teprve poznáš význam
slova "kamarád".
Dobrý skutek stát Tě bude
koupě misky, granulek,
avšak vděčnost a psí láska
zůstane na věků věk...
Zdrojový kód obrázkového pozadí
<div id="verse">
Člověče, jenž postojíš
a vybereš si psíka,
co v boudě osamocen
pláče a naříká:
pejsek k Tobě vzhlížet bude
obdivně a rád,
s ním teprve poznáš význam
slova "kamarád".
Dobrý skutek stát Tě bude
koupě misky, granulek,
avšak vděčnost a psí láska
zůstane na věků věk...<span></span></div>
<style type="text/css">
#verse {white-space: pre; margin: 0; margin-top: 1.5em; padding: 0; width: 260px;
height: 267px; position: relative; float: right; font-size: 0.85em;
line-height: 1.1em;}
#verse span {margin: 0; padding: 0; display: block; position: absolute; width: 260px;
height: 276px; z-index: 1; background: url(/extra/verse.gif) no-repeat;
right: 32px; top: -20px;}
</style>