Průhledné pozadí ve všech prohlížečích
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>
Mohlo by vás také zajímat
-
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024 -
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024
Nejnovější
-
Jak rozšířit úložiště Macu za pětinovou cenu?
16. prosince 2024 -
Nové trendy v doménách pro osobní projekty – DIY, LIVING a LIFESTYLE
9. prosince 2024 -
Jak chránit webové stránky před Web/AI Scrapingem
27. listopadu 2024 -
Jaký monitor je nejlepší k novému Macu Mini?
25. listopadu 2024