我不想从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中继承.这是一个后期渲染组变换.换句话说,如果a <div>具有不透明度设置,则将div及其所有子项渲染到临时缓冲区中,然后将整个缓冲区合成到具有给定不透明度设置的页面中.

你想在这里做什么取决于你正在寻找的确切渲染,这个问题并不清楚.

Answer 3

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

但是,如果你想要一个荒谬的解决方案,类似于在这个帖子(也是我的网站)的另一个答案中链接的解决方案,这里是我写的一个全新的脚本,它自动修复了这个问题,名为thatNotYoChild.js:

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

基本上它使用JavaScript从父div中删除所有子元素,然后将子元素重新定位到它们应该的位置,而不再实际成为该元素的子元素.

对我而言,这应该是最后的手段,但我认为如果有人想这样做的话,写下这样做的东西会很有趣.

Answer 4

如果您的父级是透明的并且您希望您的孩子是相同的,但只是定义(例如,覆盖选择下拉列表的用户代理样式),这是一个小技巧:

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

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

Answer 5

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

但我们可以使用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;

               }

输出: -

由于从父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中

Answer 6

这个问题没有定义背景是颜色还是图像，但由于@Blowski 已经回答了彩色背景，下面的图像有一个技巧：

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

通过这种方式，您可以操纵不透明度的颜色，甚至可以添加漂亮的渐变效果。

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

Answer 7

没有一种万能的方法，但我发现特别有用的一件事是为 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 和背景图像的颜色不透明度