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

370

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

我有一个div是父级，而我在第一个div中有另一个div是孩子。

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

我怎样才能做到这一点？

css 
— 狮王
source
12
opacitydisplay: none在这个意义上有点像。
— Paul D. Waite，
3
— 阿德里安要
3
— Dan Dascalescu 2014年

Answers:

620

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

所以代替：

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

采用

background-color: rgba(0,0,255,0.5);
— 丹·布鲁斯
source
7
这仅适用于背景色，除非文本颜色支持Alpha通道？另一个类似的背景解决方案当然是强大的.png:)
— Wesley Murch
1
背景颜色：rgba（0,0,255,0.5）; 此代码正确，但不适用于ie6和ie7
— Lion King
2
@Madmartigan是的，如果希望父div中的文本具有不透明度，则必须使用跨度设置文本的不透明度。您可以使用polyfill使其向后兼容，也可以使用png。
— Dan Blows'Apr
@LionKing-有几种解决方法。您可以构建1x1半透明的PNG，然后使用条件注释将其设置为父div上的背景图像，并使用AlphaImageLoader来使透明度起作用。
— Dan Blows
1
欢迎使用CSS-据我所知，没有跨浏览器兼容的更快方法。幸运的是，一旦代码可以运行一次，就可以在其他项目中使用它。唯一的其他选择是使用jQuery的不透明度函数，该函数可以为您处理很多此类问题。
— Dan Blows
63

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

您在这里到底想做什么取决于您正在寻找的确切渲染，这个问题尚不清楚。

— 鲍里斯·扎巴尔斯基
source
2
在Chrome 26.0.1410.63中，这是错误的。设置opacity: .7;上div#container使每一个子元素-从ul/ li到img到p-也有着同样的不透明度。它肯定是继承的。
— 布赖森
53
如果被继承，他们会变得更轻。尝试实际设置opacity: 0.7所有后代，以查看继承的外观。就像我说的那样，发生的是将不透明度作为一个单元应用于整个“元素及其所有后代”组，而不是继承。
— Boris Zbarsky
29

就像其他人在此线程和其他类似线程中提到的那样，避免此问题的最佳方法是使用RGBA / HSLA或使用透明的PNG。

但是，如果您想要一个荒谬的解决方案，类似于该线程（也是我的网站）的另一个答案中链接的解决方案，那么我写了一个全新的脚本，该脚本可以自动解决此问题，称为thatsNotYoChild.js：

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

基本上，它使用JavaScript从父div中删除所有子项，然后将子元素重新定位到应有的位置，而不再是该元素的子项了。

对我来说，这应该是万不得已的方法，但是我认为如果有人愿意这样做，写点东西会很有趣。

— 路易·L
source
18

如果您的父母是透明的，并且您希望您的孩子是一样的，但被专门定义（例如，覆盖选择下拉列表的用户代理样式），这是一个小技巧：

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

.child {
     background-color: rgba(128,128,128,0);
}
— tsveti_iko
source
12

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

但是我们可以使用css position属性来完成我们的成就。

文本容器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;

               }

输出：-

继承的文本不透明度（文本颜色为＃000；但不可见。）

文本不可见，因为从父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;  
               }

输出：

不继承

文本与背景颜色相同，因为div不在透明div中

— 阿曼
source
4

这个问题没有定义背景是彩色还是图像，但是由于@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>
展开摘要

— 里科·莱特曼
source
2

display: block元素似乎并没有从display: inline父母那里继承不透明性。

Codepen示例

也许是因为它是无效的标记，并且浏览器正在秘密地将它们分开？因为消息来源没有显示出这种情况。我想念什么吗？

— 安德鲁·蒂贝茨（Andrew Tibbetts）
source
2

上面的答案对我来说似乎很复杂，所以我这样写：

#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是您（不透明）的孩子。下方的所有内容都位于您网站的其余部分。

— 1_错误
source
2

没有一种适合所有人的方法，但是我发现特别有用的一件事是为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滤镜使用rgba和background-image修复颜色不透明度

— 利维·布利达尔
source
0

如果必须将图像用作透明背景，则可以使用伪元素来解决它：

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%;
}
— 蛛网膜下腔
source
0

我的答案不是关于静态父子布局，而是关于动画。

我今天正在做一个svg演示，我需要将svg放在div内（因为svg是用父级的div宽度和高度创建的，以使周围的路径动画化），并且在svg路径动画期间，该父div必须不可见（然后这个div应该animate opacity from 0 to 1是最重要的部分）。而且由于parent div的opacity: 0隐藏了我的svg，因此我遇到了带有visibility选项的hack （visibility: visible可以在child的父内部看到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

— 尼古拉·塔拉诺夫（Nikolay Talanov）
source
-1

通过以下方式递归为子级分配不透明度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>
展开摘要

— 泰德·斯考勒
source
-3

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

.table:hover > .row:not(:hover)
— 牛奶人
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.