.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

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

CSS alpha透明度方法（在Internet Explorer 8中不起作用）：#div｛背景色：rgba（255,0,0.5）；｝根据您的选择使用透明的PNG图像作为背景。使用以下CSS代码片段创建一个跨浏览器的alpha透明背景。下面是一个#000000@0.4%不透明度的示例.div文件{背景：rgb（0,0,0）；背景：透明\9；背景：rgba（0,0,0,0.4）；filter:progid:DXImageTransform.Microsoft.gradient（startColorstr=#66000000，endColorstr=#66000000）；缩放：1；}.div:第n个子级（n）{过滤器：无；}

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

子级继承不透明度。如果他们不这样做，那会很奇怪，也很不方便。

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

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

<div style=“background-color:rgba（0，0，0）；”>＜div＞已添加文本。</div></div>

您可以使用Sass的transparentize。

我发现它是最有用、最容易使用的。

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6) 

查看更多：#transparentize（$color，$amount）⇒ Sass:：脚本：：值：：颜色

.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}

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

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

您可以创建两个单独的div，如下所示：

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

为背景设置所需的CSS不透明度和其他财产，并使用z索引属性（z索引）设置bContent div的样式和位置。使用此选项，您可以将div放在背景div的上方，而不会影响其不透明度。

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

最后一个选项是，只需在所需的图像编辑器中选择所需颜色的半透明.png图像，将background image属性设置为图像的URL，然后就不必担心使用CSS而失去嵌套div结构的功能和组织。