opacity css3
9 
2 
4 
10 
4
Hop længere ned på siden, til:
Siden er opdateret 31. 5. 2012
Ren css-løsnings
Med egenskaben opacity (delvis gennemsigtighed) kan man definere en delvis gennemsigtighed på en boks.
- Alle versioner af Internet Explorer forstår ikke den korrekte css-løsning, men har sin egen-definerede måde: filter.
- Opera før version 9 forstår ikke denne løsning.
Her skal vi så have noget tekst
I css:
#cssboks {
color: #000;
background-color:#fff;
filter:alpha(opacity=30);
opacity:0.3;
}
I html:
<div id="cssboks">Tekst her</div>
Ydermere skal tilføjes, at filter:alpha(opacity=30); ikke er valid css. Skal css være valid, er man altså nødt til 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]-->
Bemærk, at IE <8 ikke kan vise opacity, hvis det er kodet validt som herover.
Ren grafik-løsning
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:
- Mozilla og Opera forstår at gengive den delvist gennemsigtige .png korrekt
- IE før version 7 fatter intet af, hvad delvis gennemsigtighed i grafik er for noget.
Her skal vi så have noget tekst
I css:
#grafboks {
color: #000;
background: url(70procent.png) top left;
}
I html:
<div id="grafboks">Tekst her</div>
Hvis .png har 0% opacitet
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:
Her skal vi så have noget tekst
I css:
#grafboks100 {
color: #000;
background: url(trans100.png) top left;
}
I html:
<div id="grafboks100">Tekst her</div>
Kombineret løsning
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.
Her skal vi så have noget tekst
<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%.
En snydeløsning
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.
Her skal vi så have noget tekst
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>
