Héritage opacity en CSS

**gostbuster** · 14/05/2009, 13h51

Bonjour,

Je suis en train de m'arracher les cheveux avec ce qui suit. J'ai pourtant fait des recherches google et developpez mais rien à faire.

Ce problème est simple, j'ai deux div de cette sorte :

Code :

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

1
2
3
<div id="div1">
<div id="div2">Ici mon texte</div>
</div>

Je voudrais que mon div1 soit transparent (avec opacity), mais que mon div 2 ne le soit pas, j'ai beau faire plusieurs essais, rien à faire.

Qu'elle est la propriété CSS qui règle réellement le problème?
Je suis conscient que l'opacité est une propriété qui s'hérite automatiquement, et je n'arrive pas à la dés-hériter.

Par avance merci

**nebil** · 14/05/2009, 13h55

quel valeur a-tu donner a "opacity" ? (opacity permet de géré le niveau d'opacité)

sinon si tu veux que cela soit totalement transparent pourquoi ne pas utiliser "transparent" ?

**gostbuster** · 14/05/2009, 13h59

Bonjour,j'ai donné à div1 :

Code :

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

1
2
3
4
 
#div1{
opacity:0.1;
}

merci

**gostbuster** · 14/05/2009, 14h09

Bonjour, j'ai bien lu cette page, seulement je n'étais pas convaincu de cette solution png.

Par ailleurs, je pense pas avoir bien compris le principe :

div2 va avoir en background un png transparent?

Merci par avance pour les explications/précisions que vous pourrez m'apporter sur cette astuce.

**Sergejack** · 14/05/2009, 15h03

L'élément enfant est dans le parent.

Si le parent est 100% transparent (en terme d'opacité et non de couleur de fond), l'enfant ne sera pas visible (puisqu'il est dans un élément se définisssant comme transparent)

Ce qu'il te faut peut-être c'est un background sans couleur :
"background-color: transparent".

S'il te faut faire du translucide, vis à vis de ce que j'ai dis plu haut, tu ne peux pas rendre des éléments opaques dans un élément (le tout) translucide.
Il te faudrait dès lors sortir l'élément opaque de l'élément translucide (et là, si tu veux faire du positionnement relatif, tu repars dans une autre recherche).