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

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

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

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

我怎样才能做到这一点？

#1楼

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

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

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

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

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

#2楼

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

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

#3楼

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

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

#4楼

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

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

#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中

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3179581

标签

绝对定位

position

top

css