Průhledné pozadí ve všech prohlížečích

29. srpna 2006

•

Toto řešení ukazuje, jak pomocí CSS vytvořit průhledné pozadí s obrázky formátu PNG. Pro dosažení průhlednosti v Microsoft Internet Exploreru, který průhledné PNG přímo nepodporuje (verze 6 a nižší), je využito vlastnosti „filter“.

Zde si můžete prohlédnout výsledek.

CSS

body
{
background: #fff url(„logo.png“) repeat center center;
font-family: sans-serif;
text-align: center;
}
#obal
{
background: transparent url(„ctverecek_75.png“) repeat left top; filter: alpha(opacity=75);
margin: 100px auto 0;
text-align: left;
padding: 15px;
width: 70%;
}
#hlavicka
{
text-align: center;
background: transparent url(„ctverecek_50.png“) repeat left top; filter: alpha(opacity=50);
}
h1
{
font-size: 130%;
padding: .5em .5em;
margin: 0 0 1em;
}
#paticka
{
clear: both;
text-align: center;
padding-top: 10px;
margin-top: 30px;
background: #FF3D3D;
position: relative;
}
h2
{
font-size: 110%;
text-align: center;
padding: .2em .2em;
margin: 0 0 1em;
}
p
{
padding: .2em;
}

XHTML

<html>
<body>
<div id=“obal“>
<div id=“hlavicka“><h1>Průhledná modrá 50% (přes žlutou)</h1></div>
<h2>Průhledná žlutá 75%</h2>
<p>Pro průhlednost je využito obrázků PNG (s nastavenou průhledností). Pro IE, který průhledné PNG nepodporuje je využita vlastnost filter: alpha(opacity=xx), kde xx je celé číslo od 0 do 100.</p>
<p>Další možností jak docílit průhlednosti je vlastnost CSS Opacity, avšak tu nepodporuje IE</p>
<p>Je také zajímavé, že různé prohlížeče interpretují několik průhledných barev přes sebe jinak.</p>
<div id=“paticka“>
<h2>Neprůhledná červená</h2>
<p>Pro nastavení neprůhledného pozadí v IE je nutné nastavit filter: none a také position na relative nebo případně absolute, podle aktuální potřeby. S position static a fixed bude pozadí stále průhledné.</p>
</div>
</div>
</body>
</html>