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

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

递归地为子对象分配不透明度1.0:

div > div { opacity: 1.0 }

Example: 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>

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

所以不要:

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

use

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

<!--Background opacity--> <style> .container1 { width: 200px; height: 200px; background: rgba(0, 0, 0, .5); margin-bottom: 50px; } </style> <div class="container1"> <div class="box1">Text</div> </div> <!--Before, after, z-index opacity--> <style> .container2 { width: 200px; height: 200px; position: relative; margin-bottom: 100px; } .container2:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; opacity: .5; z-index: 1; } .box2 { position: relative; z-index: 2; } </style> <div class="container2"> <div class="box2">Text</div> </div> <!--Outline opacity--> <style> .container3 { width: 200px; height: 200px; outline: 50px solid rgba(0, 0, 0, .5); margin: 50px; } .box3 { position: relative; left: -16px; } </style> <div class="container3"> <div class="box3">Text</div> </div>

看起来，display: block元素并没有从display: inline父元素继承不透明度。

Codepen例子

也许是因为它是无效的标记，浏览器正在秘密地分离它们?因为资料没有显示这种情况。我遗漏了什么吗?

我也遇到了同样的问题，在谷歌了一下之后，我找到了一些解决这个问题的方法(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;
}