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.





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.

^ Tilbage til sidens top


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:





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>

^ Tilbage til sidens top


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>

^ Tilbage til sidens top


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%.

^ Tilbage til sidens top


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>

^ Tilbage til sidens top

Valid XHTML og CSS / Copyright © Erik Ginnerskov januar 2005
Hjemmesideskolen
Du er her: Forsiden - css - egenskaber - opacity
sidens top
Brugere lige nu: 1
Home Mail