CSS背景不透明度[重复]

这是因为内部div具有嵌套它的div的不透明度的100％（不透明度为40％）。

为了规避它，您可以做一些事情。

您可以这样创建两个单独的div：

<div id="background"></div>
<div id="bContent"></div>

为背景设置所需的CSS不透明度和其他属性，并使用z-index属性（z-index）设置bContent div的样式和位置。这样，您可以将div放置在背景div的上方，而不会使其变得不透明。

另一种选择是RGBa。这将允许您嵌套div并仍然实现div特定的不透明度。

最后一个选择是简单地在所需的图像编辑器中制作所需颜色的半透明.png图像，将background-image属性设置为图像的URL，这样就不必担心变色了。使用CSS并失去嵌套div结构的功能和组织。

只需确保将前景的宽度和高度与背景设置为相同，或尝试具有top，bottom，left和right属性。

<style>
    .foreground, .background {
        position: absolute;
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="foreground"></div>
<div class="background"></div>

可以使用以下方法解决您的问题：

1. CSS alpha透明方法（在Internet Explorer 8中不起作用）：

   #div{background-color:rgba(255,0,0,0.5);}
   

2. 根据您的选择使用透明的PNG图像作为背景。

3. 使用以下CSS代码段创建跨浏览器的alpha透明背景。这是#000000不透明度为0.4％的示例

   .div {
       background:rgb(0,0,0);
       background: transparent\9;
       background:rgba(0,0,0,0.4);
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
       zoom: 1;
   }
   .div:nth-child(n) {
       filter: none;
   }
   

有关此技术的更多详细信息，请参阅this，它具有一个在线CSS生成器。

您可以使用CSS 3 :before来获得半透明的背景，并且只需一个容器即可完成此操作。使用这样的东西

<article>
  Text.
</article>

然后应用一些CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

范例：http：//codepen.io/anon/pen/avdsi

注意：您可能需要调整z-index值。

儿童遗传不透明。如果他们不这样做，那将会很奇怪和不便。

您可以为背景图像使用半透明的PNG文件，也可以为背景颜色使用RGBa（alpha表示）颜色。

例如，50％的黑色背景褪色：

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Text added.
   </div>
</div>