Discussion :

[hichamdeb]

Bonjour,
je voudrai faire un transparant sur ma page, le problème c'est qu'en mettant sa sur le background y a tout le contenue de la balise qui devient transparant!

avez vous une idée?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
background-color:#333333;
opacity:0.6;filter:alpha(opacity=60);
background-repeat:repeat;

[adiGuba]

Salut,


Ce comportement est tout à fait normal : opacity s'applique sur tout le bloc et sur tous ses composants...


La solution la plus propre pour cela existe en CSS3 via rgba() qui permet de définir une couleur avec une valeur alpha pour la transparence :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background-color: rgba(51,51,51,0.6);

Seulement ce n'est pas encore supporté par tous les navigateurs, donc il faut mettre en place une couleur par défaut sans transparence pour les vieux navigateurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
background-color: rgb(51,51,51); /* pour les navigateurs incompatible */
background-color: rgba(51,51,51,0.6);

Attention toutefois : le support est assez récent (Firefox 3.0, Opera 10, Safari 3.1) et ne l'est pas encore pour IE (il faudra attendre la version 9).




Sinon une autre solution serait d'utiliser une image d'un pixel en background, en utilisant une image PNG avec une couche alpha.
Mais encore une fois, attention car les PNG pose des problèmes sur IE6 !


a++

PS : transparent

[hichamdeb]

Farfait ! sa marche au départ j ai opté pour l'image png, mais dans ce cas aussi, le contenue est transparant :/ tampis pour le IE =)