Transparence des images et navigateurs

Tutoriels HTML/CSS

Gérer l’opacité d’un élément HTML permet d’éviter de fastidieuses mises en pages. L’effet de transparence dans le webdesign est très utilisé sur les sites web actuels mais son utilisation en CSS est quelques peu farfelue.

Publié il y a déjà trop longtemps…

Beaucoup de webmasters connaissent la fameuse propriété Microsoft filter, notamment pour changer l’opacité d’un élément HTML. Exemple :

[css] filter:alpha(opacity=50); /* Réduit l'opacité à 50% */

Ceux-ci s’orientent plus vers les utilisateurs d’Internet Explorer et oublient complètement les utilisateurs de FireFox ou de Safari.

Or, dans la guerre sanglante des navigateurs web Internet Explorer n’est pas vraiment à conspuer car tous ont inventés leur propre propriété CSS concernant l’opacité des éléments HTML. Mozilla a élaboré la propriété -moz-opacity pour FireFox et Konqueror la propriété -khtml-opacity (moteur utilisé par Safari).

Concrêtement pour donner un effet de transparence visible sur les navigateurs les plus utlisés, il faut utiliser trois propriétés CSS non-valides. Pour pallier à ce problème, la prochaine version de CSS (la n°3) contiendra la propriété opacity qui sera censée mettre tout le monde d’accord pour l’interprétation de la transparence.

En attendant, il faut utiliser ce petit code :

[css] .maclass {    filter:alpha(opacity=50);    -moz-opacity:0.5;    -khtml-opacity: 0.5;    opacity: 0.5; }

Le problème est que ces propriétés ont chacune leur propre echelle de valeurs, voici un petit schema permettant de ne pas se mélanger les pinceaux :

Pour finir, un exemple concret :

Prenez une image de fond (ici l’eau) et créez une image d’illustration (ici le tube avec le texte (nb : il s’agit d’une impression d’écran sur Photoshop afin de pouvoir voir le rendu, en réalité il s’agit d’un GIF transparent avec du contenu blanc pur qui serait difficilement visible sur cette page).
Insérez ce code HTML ci-dessous (privilègiez les ids et les classes).
Et voyez le résultat ! (identique tous navigateurs)

[html] <div style="width:175px; height:117px; color:#FFF; background:scroll transparent url(eau.jpg) top no-repeat;"> <img src ="babtest.gif" style="filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5;" alt="" /> </div>

Et bonne année 2005 ! ;)

Article rédigé par Samuel Le Morvan.

Ce que nos lecteurs en disent :

Ronan

Punaise, un 1er janvier… t’as passé ton premier de l’An à faire du css ;-) Enfin remarque, te connaissant, t’as pas non plus dû faire que ça…
Shemu

;op
neak

Je suis très surpris de voir ke l’effet d’opacité n’existe pas que sur IE, merci
(bravo pour la classe de votre site)
goap

pas mal du tout,
mais existe t-il une feinte pour que celà fonctionne avec internet explorer mac ?

sinon il est possible il me semble d’utiliser des png transparents avec un javascript pour que cela fonctionne sur ie.
Gaeldîr

Très utiles, ces propriétés, mais à ne pas utiliser si l’ont conçoit des sites conformes W3C ;-) en ce cas, mieux vaut (et je préfère ceci) utiliser un Javascript pour rendre IE/Win PNG-compatible :-)
skimy

attention,
"-moz-opacity and opacity affecte à tous les enfants du container une transparence, impossible de faire autrement." cf : http://www.entrezeroetun.com/wik...
Mais dites moi tout si vous savez comment rendre les enfants bien opaque :)
carsyl

Chapeau bas pour ce site qui propose des explications claires, techniques et complètes …Enfin un site qui va au coeur du problème, qui traite les cas particuliers. Ca nous évitera des heures de Google ;-)))
br1o

Excellent, je ne connaissais pas du tout la propriété pour Konqueror. Merci
MT

Salut à tous,
erci pour l’astuce, mais je rajouterais que si l’on veut passser le validateur W3C il faut l’écrire en javascript dans un fichier externe du style :
document.write("<style>");
document.write(".maclass{filter:alpha(opacity=75);-moz-opacity:0.75;-khtml-opacity:0.75;opacity: 0.75;}");
document.write("</style>");

Voilà c tout
starn

un grand bravo pour les tutoriaux et le design du site vraiment sympa!
bonne continuation ;)
bruce

Bonjour, J’ai utilisé pour mon site les filtres que vous proposez :
#maclass {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

ils fonctionnent à merveille !! Cependant, lorsque j’insère une image dans cette division, elle est également transparente… Comment annuler l’effet de transparence sur les images ?

Merci

Shemu

Il ne faut pas placer ton image dans la <div>, mais par-dessus…Utilise peut-être les PNG si tu veux la transparence d’un fond.

MT

Salut,
C’est encore moi, Shemu propose d’utiliser le PNG, cela pose problème pour IE avant IE7. Les anciennes version ne gèrent pas la transparence du PNG. Voici une petite fonction en javascript qui va aider IE, il faut la déclencher sur le onLoad de la page et avoir un gif de 1X1 transparent pour que cela fonctionne (spacer.gif par exemple) :

function enlevePNG(){
if(window.ActiveXObject){
var img=document.images;
for(i=0;i<img.length;i++){
var o=img[i];
var type=o.src.substring(o.src.length-3,o.src.length);
if(type.toLowerCase()=="png"){
w=o.width;h=o.height;Img=o.src;
o.src="images/spacer.gif";o.width=w;o.height=h;
o.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’"+Img+"’,sizingMethod=’scale’);";
}
}
}
}

Voilà c’est réglé !

Shemu

Hello MT, Effectivement, mais j’ai déjà posté plusieurs solutions à ce sujet dans des billets plus récents

Les commentaires sont clos.