以下是对我有用的:

改变了

来自:

opacity: 0.52;
background-color: #7c7c7c;

To:

opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;

要将十六进制和不透明度转换为rgba， 使用http://hex2rgba.devoth.com/这样的网站

在mac上，你可以使用预览编辑器将不透明度应用到你的。png图像上的白色矩形上，然后把它放在你的。css中。1)ImageLogo2)在imagereectanle周围创建一个矩形3)改变背景颜色为白色矩形变成白色4)调整矩形不透明图像

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

I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with 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中，你用timeout函数删除。invisible类，添加。opaque -zero类，用。style。top之类的东西触发布局;并删除。opaque - 0类。

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

如果你必须使用一个图像作为透明背景，你可以使用一个伪元素来解决它:

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

上面的答案对我来说似乎很复杂，所以我写了这个:

#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是你的(不透明度)父母，弹出是你的(不透明度)孩子。它下面的所有内容都是站点的其余部分。

我也遇到了同样的问题，在谷歌了一下之后，我找到了一些解决这个问题的方法(3种方法)。 我在这里分享解决方案，你可以尝试其中任何一种。

选项1: 在之前或之后使用伪标记元素作为背景

.parentContainer {
    position: relative;
}
.parentContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0.6;
}
.childContent {
    position: relative;
    color: red;
    z-index: 1;
}

选项2: 使用带有alpha值的rgba颜色而不是不透明度。

 <div id="parentContainer" style="background: rgba(255,255,255,0.6);">
    <div id="childContent">
         Content ...
    </div>
 </div>

选项3: 使用背景div，一个元素的绝对位置高于另一个元素。

<div class="parentContainer">
  <div class="childContent">
    Here is the content.
  </div>
  <div class="background"></div>
</div>


.parentContainer {
  position: relative;
}
.childContent {
  position: relative;
  color: White;
  z-index: 5;
}
.background {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: Black;
  z-index: 1;
  opacity: .5;
}