Brugere lige nu: 1
Hop længere ned på siden, til:
Siden er opdateret 29.11.2008
Egenskaben opacity (delvis gennemsigtighed) er først medtaget i css3-standarden. Desuden er der en del problemer med at få de forskellige browsere til at gengive opacity korrekt.
I css:
#cssboks {
color: #000;
background-color:#fff;
filter:alpha(opacity=30);
opacity:0.3;
-moz-opacity:0.3; /* ikke nødvendig for nyere Mozilla */
}
I html:
<div id="cssboks">Tekst her</div>
Ydermere skal tilføjes, at hverken filter:alpha(opacity=30); eller -moz-opacity:0.3; er valid css. Skal css være valid, er man altså nødt til at lade ældre Mozillaer i stikken ved at undlade -moz-opacity:0.3; og at lægge filter:alpha(opacity=30); ind i en conditional comment:
<!--[if IE]>
<style type="text/css" media="screen">
#cssboks {
filter:alpha(opacity=30);
}
</style>
<![endif]-->
En slutbemærkning: opacity er som tidligere nævnt ikke en del af css før version 3. Så selv om jigsaw.w3.org siger valid css, kommer der en warning.
Man kan også lave den delvise gennemsigtighed med ren grafik: En .png-fil, der har fået defineret 70% transparens. Det er en nem og hurtig løsning, men det er ikke den endegyldige løsning:
I css:
#grafboks {
color: #000;
background: url(70procent.png) top left;
}
I html:
<div id="grafboks">Tekst her</div>
En .png-fil, der har fået defineret 100% transparens (o% opacitet) på de transparente arealer, udgør ikke noget problem i IE 5.0, 5.5 og 6:
I css:
#grafboks100 {
color: #000;
background: url(trans100.png) top left;
}
I html:
<div id="grafboks100">Tekst her</div>
Men hvis man nu kombinerer de to løsninger herover: Grafik til Mozilla og Opera og filter til ældre versioner af Internet Explorer, skulle man kunne gøre alle glade.
<style type="text/css">
body>div#indhold #kombiboks {
color: #000;
background: url(70procent.png) top left;
}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#kombiboks {
color: #000;
background-color: #fff;
filter:alpha(opacity=30);
}
</style>
<![endif]-->
Først definerer vi med en child selector (det forstår de ældre versioner af IE ikke) at baggrunden i boksen skal være den delvist gennemsigtige .png-fil. Derefter definerer vi i en conditional comment (som kun IE forstår) at baggrunden skal være hvid med en filtereffekt på 30%.
Desværre er opacity ikke valid kode efter css2-standarden, så det udløser en fejlmelding. Indil for ikke så længe siden gav det kun en Warning, men W3C's css-validator er blevet strengere i løbet af september 2005.
Men hvis man validerer css med parameteren ?profile=css3, vil opacity blive godkendt som valid kode. Se hvordan jeg har skrevet det i denne sides footer.
Man kan lave en 'snydeløsning, hvor man kun bruger en grafikfil. Alle browsere kan gengive det. Men på skærme med lav opløsning vil det ikke blive så pænt.
Først har jeg lavet en grafikfil, hvor hver anden pixel er gjort transparent. Linje for linje har jeg lavet dette forskudt vandret 1 pixel i forhold til linjen før. Jeg har lavet den i filformatet png, fordi det giver den mindste fil.
Derefter har jeg blot indsat denne snyd.png som baggrund i den inderste kasse:
I css:
#snydboks {
color: #000;
background: url(snyd.png) top left;
}
I html:
<div id="snydboks">Tekst her</div>