我不想继承CSS中父级的子级不透明度

Question

我不想从CSS中的父级继承子级不透明度。

我有一个div是父母，我有另一个div里面的第一个div是孩子。

我想在父div中设置opacity属性，但我不希望子div继承opacity属性。

我该怎么做？

Answer 1

不使用不透明度，而是使用rgba设置背景色，其中'a'是透明度级别。

所以不是：

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

使用

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

Answer 2

透明度不CSS实际上继承。这是一个后渲染组变换。换句话说，如果<div>设置了不透明度，则将div及其所有孩子渲染到临时缓冲区，然后将该整个缓冲区复合到具有给定不透明度设置的页面中。

你究竟想在这里做什么取决于你正在寻找的确切的渲染，这是不明确的问题。

Answer 3

正如其他人已经在这个和其他类似的线程中提到的，避免这个问题的最好方法是使用RGBA/HSLA或使用透明的PNG。但是，如果你想要一个荒谬的解决方案，类似于在这个线程（这也是我的网站）的另一个答案中链接的解决方案，这里是我写的一个全新的脚本，自动修复了这个问题，名为thatsNotYoChild.js：

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

基本上它使用JavaScript来从父DIV中删除所有的孩子，然后重新定位的子元素回到它们应该在哪里，而不该元素的实际上是孩子了。

对我来说，这应该是最后一招，但我认为写这样做会很有趣，如果有人想这样做。

Answer 4

如果你有使用图片作为背景透明，你也许可以使用伪元素来解决它：

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%; 
} 

Answer 5

对于其他人试图制作一张桌子（或其他东西）看起来专注于使用不透明度的一行。就像@Blowski所说的使用颜色不是不透明的。看看这个小提琴：http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover) 

Answer 6

我的回答是不是静态的亲子布局，其对动画。

我今天做了一个svg演示，我需要svg在div里面（因为svg是用父级的div宽度和高度创建的，为了给周围的路径设置动画），并且这个父级div需要在svg路径中不可见动画（然后这个div应该是animate opacity from 0 to 1，这是最重要的部分）。而由于与opacity: 0父DIV躲在我的SVG，我遇到了这个黑客与visibility选项（孩子visibility: visible可以在里面父母可以看出与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; 
} 

，然后在JS，你删除.invisible类超时功能，增加.opacity-zero类，触发布局类似whatever.style.top;和删除.opacity-zero类。

var $main = $(".main"); 
    setTimeout(function() { 
    $main.addClass('opacity-zero').removeClass("invisible"); 
    $(".test-svg").hide(); 
    $main.css("top"); 
    $main.removeClass("opacity-zero"); 
    }, 3000); 

更好地检查这个演示子元素的http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

Answer 7

不透明度是从父元素继承。

但是我们可以使用CSS位置属性来完成我们的成就。

文本容器div可以放在父div之外，但绝对定位投影所需的效果。

理想要求------------------ >>>>>>>>>>>>

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; 

       } 

输出： -

文本不可见，因为从父div继承不透明度。

解决方案------------------- >>>>>>

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; 
       } 

输出：

t他的文字与背景颜色相同，因为div不在透明格

Answer 8

如果背景是彩色或图像，但问题没有定义，但由于@Blowski已经回答了彩色背景，下面的图像破解：

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg'); 

这样你可以操纵你的不透明度的颜色，甚至添加漂亮的渐变效果。

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

Answer 9

似乎display: block元素不从display: inline父母继承不透明度。

Codepen example

也许是因为它是无效的标记，而浏览器偷偷把它们分开？因为来源不显示这种情况。我错过了什么吗？上述

Answer 10

答案似乎复杂，我，所以我写了这个：

#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这是你的（不透明度）的父母，pop-up这是你的（不透明度）的儿童。它下面的一切都是你网站的其余部分。

Answer 11

一个小技巧，如果你的父母是透明的，你想你的孩子是一样的，但完全确定（如覆盖用户代理样式选择下拉列表中）：

.parent { 
    background-color: rgba(0,0,0,0.5); 
} 

.child { 
    background-color: rgba(128,128,128,0); 
} 

Answer 12

分配不透明1.0给孩子用递归：

div > div { opacity: 1.0 } 

例子：

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>

Answer 13

没有一种适合所有人的方法，但我发现有一点特别有用的是为div的直接孩子设置不透明度，除了要保持完全可见的那个。在代码：

<div class="parent"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
    <div class="child3"></div> 
    <div class="child4"></div> 
</div> 

和CSS：

div.parent > div:not(.child1){ 
    opacity: 0.5; 
} 

如果你有背景颜色/上的父图像你通过施加alpha滤镜