Héritage opacity en CSS

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:

---

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

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" ?

Bonjour,

Citation:

---

Envoyé par gostbuster

J'ai pourtant fait des recherches google et developpez mais rien à faire.

---

Si ...

Bonjour,j'ai donné à div1 :

Code:

---

1 2 3 4

#div1{ opacity:0.1; }

---

merci

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.

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).

Sinon sortir si possible l'enfant du parent (c'est la méthode utilisée par les Lighbox et dérivés) pour éviter la descendance de l'opacité.

Bonjour,

Merci pour vos explications. Je comprends mieux ce qu'il faut faire :

le div enfant, je vais le sortir du div parent, et le superposer dessus.

Merci pour vos infos!

Bonjour, j'ai résolu mon problème avec la méthode suivante :

Code:

---

1 2 3 4 5 6 7

#divparent{   position absolute;}   #divenfant{ position:relative;}

---

puis :

Code:

---

1 2 3

<div id="divparent"></div> <div id="divenfante"></div>

---

VOila!

cordialement.