Discussion :

[Nixar]

Bonjour,
je souhaite gérer la transparence de plusieurs de mes div, et pour cela j'ai ajouté les 3 lignes suivantes, pour tous les navigateurs :

Code :

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

1
2
3
    -moz-opacity:0.4;
	opacity: 0.4;
    filter:alpha(opacity=40);

Le problème est que je souhaite que la transparence ne s'applique que sur le fond de mon div : d'autre propriétés comme la bordure ou le texte ne doivent pas être affectées.

Comment gérer cela? Est-ce possible avec la mise en cascade des style?

Merci de vos réponses.

Nixar.

[Bisûnûrs]

Il faut jouer avec des inclusions, parce que tous les éléments qui se trouvent dans celui dont l'opacité est réduite voient leur opacité héritée aussi.

Exemple :

Code html :

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

1
2
3
4
<div id="conteneur">
   <div id="transparent"></div>
   <div id="content">Du texte du texte</div>
</div>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#conteneur{
   position:relative;
}
#transparent{
   position:absolute;
   width:300px;
   height:300px;
   top:0;
   left:0;
   background:url(monimage.gif);
   opacity:0.4; /* + tous les autres */
}
#content{
   border:3px solid red;
   width:294px;
   height:294px;
}

[rems033]

Les options de transparence sont elles vraiment compatibles sous IE6?

[Kerod]

Si si elles sont compatibles mais petit soucis opacity n'est pas valide W3C.

[Candygirl]

Le plus simple (à éviter au cas ou le texte devient illisible en l'absence de l'image) est d'utiliser un png transparent en fond de ton div.

[rems033]

J'ai déja essayé cette solution mais en fait, sur IE6, le fond apparait gris...

[Kerod]

Ben c'est que peut-être ton image est un PNG et que IE6 ne les gère pas

[Bisûnûrs]

J'ai déja essayé cette solution mais en fait, sur IE6, le fond apparait gris...

Comme dit Kerod.

Et il y a un filtre Microsoft qui corrige ça :

http://support.microsoft.com/kb/294714

[Kerod]

Qui n'est pas valide W3C aussi

Donc pour l'utiliser il faudrait peut être passer par la solution javascript

[Bisûnûrs]

Utilisé avec un commentaire conditionnel dans une feuille de style, si.

[Kerod]

Commentaire conditionnel dans une feuille de style ?

Exemple ?!

[Bisûnûrs]

C'est vrai que ma phrase porte à confusion ...

Utilisé avec un commentaire conditionnel, dans une feuille de style, si.

Utilisé dans une feuille de style, avec un commentaire conditionnel, si.

Mieux ?

[Kerod]

Oui pour le filter de Microsoft mais pour opacity non

[Bisûnûrs]

Ben on parlait du PNG là et non plus de l'opacité.

[Candygirl]

Oui pour le filter de Microsoft mais pour opacity non

opacity est valide css3

[Kerod]

Oui je suis d'accord pour le CSS3 mais si tu tentes de faire valider actuellement une feuille de style ben ça te donne invalide.

[Candygirl]

http://jigsaw.w3.org/css-validator/
et tu choisis plus d'options. Mais on est d'accord que, par défaut, ça valide en css 2.1

[Kerod]

Effectivement, j'ai pas l'habitude de toucher aux options vu que je mets la plupart du temps le fameux :

http://jigsaw.w3.org/css-validator/check/referer/

Mais je viens de tester avec ceci :

http://jigsaw.w3.org/css-validator/check/referer/?warning=1&profile=css3

et ça valide directement en CSS3