Je ne veux pas hériter de l'opacité de l'enfant du parent dans CSS
Je ne veux pas hériter l'opacité de l'enfant du parent dans CSS.
j'ai un 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 mettre la propriété opacity dans la div mère, mais je ne veux pas que l'enfant div hérite de la propriété opacity.
Comment faire?
13 réponses
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);
L'opacité n'est pas en fait héritée dans CSS. C'est une transformation de groupe post-Rendu. En d'autres termes, si un <div> a un jeu d'opacité, vous transformez la div et tous ses enfants en un tampon temporaire, puis vous composez ce tampon entier dans la page avec le paramètre d'opacité donné.
ce que vous voulez exactement faire ici dépend du rendu exact que vous recherchez, ce qui n'est pas clair à la question.
comme d'autres l'ont mentionné dans ce threads et d'autres similaires, la meilleure façon d'éviter ce problème est d'utiliser RGBA/HSLA ou bien utiliser un PNG transparent.
mais, si vous voulez une solution ridicule, semblable à celle liée dans une autre réponse dans ce fil (qui est aussi mon site web), voici un tout nouveau script que j'ai écrit qui corrige ce problème automatiquement, appelé thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity /
fondamentalement, il utilise JavaScript pour supprimer tous les enfants de la div mère, puis repositionner les éléments enfants de nouveau à l'endroit où ils devraient être sans être réellement les enfants de cet élément plus.
Pour moi, ce devrait être un dernier recours, mais j'ai pensé qu'il serait amusant d'écrire quelque chose qui l'a fait, si quelqu'un veut le faire.
un petit truc si votre parent est transparent et que vous souhaitez que votre enfant soit le même, mais défini exclusivement (par exemple pour écraser les styles d'agent utilisateur d'un dropdown select):
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
l'Opacité de l'élément enfant est héritée de l'élément parent.
mais nous pouvons utiliser la propriété CSS position pour accomplir notre exploit.
le conteneur de texte div peut être placé à l'extérieur de la div mère, mais avec un positionnement absolu projetant l'effet désiré.
Idéal Exigence------------------>>>>>>>>>>>>
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
sortie: --
le texte n'est pas visible parce qu'il hérite de l'opacité de div.parent.
Solution ------------------->>>>>>
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
sortie:
le Texte est visible avec la même couleur comme de fond parce que le div n'est pas dans le div transparent
la question n'a pas été définie si le fond est une couleur ou une image mais comme @Blowski a déjà répondu pour les fonds colorés, il y a un hack pour les images ci-dessous:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
de Cette façon, vous pouvez manipuler la couleur de votre opacité et même ajouter un joli dégradé effets.
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}
h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}<div class="wrapper">
<h1>Question 5770341</h1>
</div> il semble que display: block éléments n'héritent pas l'opacité de display: inline parents.
peut-être parce que c'est un markup invalide et que le navigateur les sépare secrètement? Parce que la source ne montre pas que ça arrive. Ai-je raté quelque chose?
les Réponses ci-dessus semblent compliquées pour moi, donc j'ai écrit ceci:
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}
#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}
span {
color: white;
}<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div> kb-mask-overlay c'est votre (opacité) parent, pop-up c'est votre (pas d'opacité) enfants. Tout en dessous du reste de votre site.
si vous devez utiliser une image comme arrière-plan transparent, vous pourriez être en mesure de travailler autour de lui en utilisant un élément pseudo:
html
<div class="wrap">
<p>I have 100% opacity</p>
</div>
css
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}
ma réponse ne concerne pas la mise en page statique parent-enfant, mais les animations.
je faisais une démo svg aujourd'hui, et j'avais besoin de svg pour être à l'intérieur de div (parce que svg est créé avec la largeur et la hauteur de div de parent, pour animer le chemin autour), et cette div de parent avait besoin d'être invisible pendant l'animation svg path (et alors cette div était censée animate opacity from 0 to 1 , c'est la partie la plus importante). Et parce que parent div avec opacity: 0 cachait mon svg, je suis tombé sur ce hack avec visibility option (enfant avec visibility: visible peut être vu à l'intérieur de parent avec visibility: hidden ):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
et puis, dans js, vous supprimez .invisible classe avec fonction de temporisation, ajoutant .opacity-zero classe, disposition de déclenchement avec quelque chose comme whatever.style.top; et supprimer .opacity-zero classe.
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
il vaut mieux vérifier cette démo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
attribuer l'opacité 1.0 à l'enfant de façon récursive avec:
div > div { opacity: 1.0 }
exemple:
div.x { opacity: 0.5 }
div.x > div.x { opacity: 1.0 }<div style="background-color: #f00; padding:20px;">
<div style="background-color: #0f0; padding:20px;">
<div style="background-color: #00f; padding:20px;">
<div style="background-color: #000; padding:20px; color:#fff">
Example Text - No opacity definition
</div>
</div>
</div>
</div>
<div style="opacity:0.5; background-color: #f00; padding:20px;">
<div style="opacity:0.5; background-color: #0f0; padding:20px;">
<div style="opacity:0.5; background-color: #00f; padding:20px;">
<div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity inherited
</div>
</div>
</div>
</div>
<div class="x" style="background-color: #f00; padding:20px;">
<div class="x" style="background-color: #0f0; padding:20px;">
<div class="x" style="background-color: #00f; padding:20px;">
<div class="x" style="background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity not inherited
</div>
</div>
</div>
</div>
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">
Example Text - 50% opacity
</div>il n'y a pas d'approche universelle, mais une chose que j'ai trouvé particulièrement utile est de définir l'opacité pour les enfants directs d'une div, à l'exception de celui que vous voulez garder pleinement visible. Dans le code:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
et css:
div.parent > div:not(.child1){
opacity: 0.5;
}
dans le cas où vous avez des couleurs d'arrière-plan/images sur le parent, vous fixez l'opacité de la couleur avec rgba et l'arrière-plan-image en appliquant des filtres alpha
pour les autres personnes essayant de faire une table (ou quelque chose) regarder concentrée sur une rangée en utilisant l'opacité. Comme @Blowski a dit utiliser la couleur pas l'opacité. Regardez ce violon: http://jsfiddle.net/2en6o43d /
.table:hover > .row:not(:hover)