Cette méthode integre la transparence par CSS pour mozilla, IE et tel que décrite dans la norme CSS 3
.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.
Cette image est pourtant la même que celle du logo en haut a gauche.
Code :
<style type="text/css"> #alphaex { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4; } </style>
<img id="alphaex" src="http://www.woow-fr.com/wikistuce/lib/tpl/mediawiki/images/logo.png" />
Un autre exemple sur le survol :
Code :
<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>
<a href="#" id="alphaex2"><img src="http://www.woow-fr.com/wikistuce/lib/tpl/mediawiki/images/logo.png" /></a>
Un application visible de ceci est disponible ici : http://www.domedia.org/oveklykken/css-transparency.php
Discussion