Je ne veux pas que l'opacité de l'enfant soit héritée du parent en CSS.

Question

Je ne veux pas que l'opacité de l'enfant soit héritée du parent en CSS.

J'ai une div qui est le parent, et j'ai une autre div à l'intérieur de la première div qui est l'enfant.

Je veux définir la propriété d'opacité dans la division parent, mais je ne veux pas que la division enfant hérite de la propriété d'opacité.

Comment puis-je faire ça ?

Answer 1

Au lieu d'utiliser l'opacité, définissez une couleur de fond avec rgba, où 'a' est le niveau de transparence.

Donc, au lieu de :

background-color: rgb(0,0,255); opacity: 0.5;

utiliser

background-color: rgba(0,0,255,0.5);

Answer 2

L'opacité n'est pas réellement héritée en CSS. Il s'agit d'une transformation de groupe post-rendu. En d'autres termes, si une <div> a une opacité définie, vous rendez le div et tous ses enfants dans un tampon temporaire, puis vous composez ce tampon entier dans la page avec le paramètre d'opacité donné.

Ce que vous voulez faire ici dépend du rendu exact que vous recherchez, ce qui n'est pas clair dans la question.

Answer 3

Comme d'autres l'ont mentionné dans ce fil et dans d'autres fils similaires, la meilleure façon d'éviter ce problème est d'utiliser RGBA/HSLA ou d'utiliser un PNG transparent.

Mais, si vous voulez une solution ridicule, similaire à celle liée à une autre réponse dans ce fil (qui est aussi mon site web), voici un tout nouveau script que j'ai écrit qui résout ce problème automatiquement, appelé thatsNotYoChild.js :

http://www.impressivewebs.com/fixing-parent-child-opacity/

Il utilise JavaScript pour supprimer tous les enfants du div parent, puis repositionne les éléments enfants à l'endroit où ils devraient être sans être réellement des enfants de cet élément.

Pour moi, cela devrait être un dernier recours, mais j'ai pensé qu'il serait amusant d'écrire quelque chose qui le fasse, si quelqu'un veut le faire.

Answer 4

L'enfant hérite toujours de l'opacité de son parent.

Démonstration de la première solution de contournement que j'ai trouvée :

http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Toutes les solutions de contournement semblent utiliser le positionnement relatif ou absolu pour déplacer le contenu translucide (frère) sous le contenu opaque.

Une autre solution consiste à définir explicitement l'opacité de chaque élément enfant sauf celui que vous souhaitez rendre totalement opaque, et utilisez un arrière-plan .png ou un canal alpha comme le suggère @Blowski pour l'élément parent. Cela signifie que le parent doit être un div "enveloppant" pour tous les autres éléments (pas de nœuds de texte directement dans le parent).

Answer 5

Comment ne pas hériter de l'opacité de l'enfant à partir du parent en CSS ?

En utilisant des pseudo-éléments, vous pouvez facilement résoudre ce problème. Utilisez "::before" pour le div parent. Consultez le lien ci-dessous pour un exemple concret :

http://sakhatech.com/blog/2013/07/24/pseudo-element-in-css3-and-html5/