Transparence

Cette méthode integre la transparence par CSS pour mozilla, IE et tel que décrite dans la norme CSS 3

Code

css
.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
}

Sous IE, la tansparence marche avec filter:alpha avec une valeur comprise entre 0 et 100. (100, totalement visible)
Sous Mozilla, il s'agit de -moz-opacity avec une valeur allant de 0 à 1 (1, totalement visible)
Et le CSS 3 normalise tous ça en proposant opacity qui va lui aussi de 0 à 1.

Exemple


Cette image est pourtant la même que celle du logo en haut a gauche.
Code :

css
<style type="text/css">
#alphaex {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
</style>
html4strict
<img id="alphaex" src="http://www.woow-fr.com/wikistuce/lib/tpl/mediawiki/images/logo.png" />

Un autre exemple sur le survol :

Code :

css
<style type="text/css">
#alphaex2 img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
-moz-opacity: 0.4;
opacity: 0.4;
}
#alphaex2:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
</style>
html4strict
<a href="#" id="alphaex2"><img src="http://www.woow-fr.com/wikistuce/lib/tpl/mediawiki/images/logo.png" /></a>

Sur le net

Un application visible de ceci est disponible ici : http://www.domedia.org/oveklykken/css-transparency.php

Article traitant du même sujet