[Résolu] Problème "d'opacity" entre mes div

Bonjour à tous!
J'ai donc un souci au niveau de l'opacity dans mon code suivant:

CODEBLOCK0

Vous voyez ici que j'utilise deux divs qui sont en fait emboîtés l'un dans l'autre: le "middle_container_border" contient le "middle_container" afin de créer une bordure autour de ce dernier. Je voulais ma bordure grise transparente et j'ai donc utilisé "opacity: 0.5" mais celle-ci s'applique EGALEMENT au second div emboîté sans que je le veuille!! Et donc ausii à mon image!
Ma question, vous l'aurez deviné, comment faire pour que l'opacity d'un div parent n'influe pas sur ceux qu'il contient?

Merci d'avance!!
Modifié par BoB-Prog (14 Feb 2013 - 13:12)

Bonjour,

la réponse est simple : tu ne peux pas. Et c'est bien normal, l'objectif d'opacity et de rendre plus ou moins transparent un bloc, et ça n'a aucun sens si son contenu n'est pas touché ! De plus le principe de la cascade ( le fondement du css !! ) est bien que les éléments enfants héritent de certaines propriétés des parents, ça ne devrait donc pas te surprendre que les enfants soient touchés aussi.

S'il s'agit uniquement de faire des bordures transparentes, tu n'as pas besoin de la première div : ajoute simplement à ton middle_container une bordure colorée en rgba ou hsla, par exemple :

border: 6px solid rgba( 153, 153, 153, 0.8 );

ce qui correspond normalement au background transparent que tu as défini sur ta première div.

Merciiii!!!
J'avais bien compris le problème d'hérédité, mais je cherchais seulement à l'annuler
En tout cas, ta solution est parfaite! (j'ai tendance à me compliquer un peu les choses )

Sujet résolu!