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

时间：2011-04-24 11:55:02

标签： css

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

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

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

我该怎么做？

14 个答案:

答案 0 :(得分：535)

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

所以而不是：

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

使用

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

答案 1 :(得分：56)

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

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

答案 2 :(得分：27)

正如其他人在本篇和其他类似主题中所提到的，避免此问题的最佳方法是使用RGBA / HSLA或使用透明的PNG。

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

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

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

对我而言，这应该是最后的手段，但我认为如果有人想这样做的话，写一些这样做会很有趣。

答案 3 :(得分：14)

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

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

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

答案 4 :(得分：8)

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

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

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

理想要求----------------＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;

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;

               }

输出： -

Inherited Opacity of Text(the text color is #000; but not visisble.)

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

解决方案-------------------＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;

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

输出：

Not Inherited

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

中

答案 5 :(得分：3)

问题没有定义，如果背景是颜色或图像，但由于@Blowski已经回答了彩色背景，因此下面是图像的黑客攻击：

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

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

＆＃13;
＆＃13; 
.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;
  }
＆＃13; 
<div class="wrapper">
<h1>Question 5770341</h1>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：2)

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

Codepen example

可能因为它的标记无效而浏览器正在秘密地将它们分开？因为来源并没有表明这种情况正在发生。我错过了什么吗？

答案 7 :(得分：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这是你的（不透明）孩子。它下面的一切都是你网站的其他部分。

答案 8 :(得分：1)

没有一种适合所有人的方法，但我发现特别有用的一件事是为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;
}

如果您在父级上有背景颜色/图像，则可以使用rgba和背景图像通过应用Alpha过滤器来修复颜色不透明度

答案 9 :(得分：1)

在Mac上，您可以使用 Preview 编辑器将不透明性应用于放置在.png图像上的白色矩形，然后再将其放入.css中。

1）图片
Logo

2）在图片周围创建矩形
Rectanle around logo

3 ）将背景颜色更改为白色
rectangle turned white

4）调整矩形的不透明度
opaque image

答案 10 :(得分：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%;
}

答案 11 :(得分：0)

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

我今天正在做一个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

答案 12 :(得分：-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>

答案 13 :(得分：-3)

对于尝试制作表格（或其他内容）的其他人，使用不透明度将焦点集中在一行上。就像@Blowski所说的那样使用颜色而不是不透明度。看看这个小提琴：http://jsfiddle.net/2en6o43d/ 

.table:hover > .row:not(:hover)
相关问题
最新问题