如何使用CSS使背景DIV仅透明

我正在使用CSS属性：

不透明度：.9

使DIV透明，但是当我在这个DIV中添加另一个DIV时，它也使它透明

我想使外部（背景）DIV只透明。怎么做？

拉小提琴：

外部DIV的不透明度属性不能由内部DIV撤消。如果要实现透明度，请使用或：

外分区：

background-color: rgba(255, 255, 255, 0.9); /* Color white with alpha 0.9*/

内分区：

background-color: #FFF; /* Background white, to override the background propery*/

编辑
因为您在问题中添加了

filter:alpha（不透明度=90）

，所以我假设您还需要（旧版本的）IE的工作解决方案。这应该可以（

-ms-

最新版本IE的前缀）：

我使用了渐变滤镜，从相同的

开始-

和

结束颜色开始，这样背景就不会显示渐变，而是一种平坦的颜色。颜色格式为ARGB十六进制格式。我编写了一个JavaScript代码片段，用于将相对不透明度值转换为绝对alpha十六进制值：

var opacity = .9;
var A_ofARGB = Math.round(opacity * 255).toString(16);
if(A_ofARGB.length == 1) A_ofARGB = "0"+a_ofARGB;
else if(!A_ofARGB.length) A_ofARGB = "00";
alert(A_ofARGB);

这是不可能的，不透明度是由子节点继承的，您无法避免这一点。要使父级透明，您必须处理元素的定位（绝对）及其z索引
我不知道这是否已更改。但根据我的经验。嵌套元素的最大不透明度等于父元素

这意味着：

<div id="a">
<div id="b">
</div></div>

Div#a has 0.6 opacity
div#b has 1 opacity


分区a的不透明度为0.6
分区b有1个不透明度

如果#b在#a之内，则其最大不透明度始终为0.6

如果#b的不透明度为0.5。实际上，它的不透明度为0.6*0.5==0.3
我也遇到了同样的问题，这是我提出的解决方案，它更容易

制作一个小的透明图像，并将其保存为.png文件

在DIV的CSS中，使用以下代码：

background:transparent url('/images/trans-bg.png') repeat center top;

请记住更改透明图像的文件路径

我认为这个解决方案适用于所有浏览器，可能除了IE6，但我还没有测试过

.modalBackground
    {

        filter: alpha(opacity=80);
        opacity: 0.8;
        z-index: 10000;
    }

使用一些图像作为内部图像并使用它。
只需不包括该div的背景色，它将是透明的。

<div id="divmobile" style="position: fixed; background-color: transparent;
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">


简而言之，你不能。将另一个div放在透明div之外。相关问题：这不会达到预期效果，不加选择地使用z索引也可能不是一个好主意-更不用说这种用法可能根本不会有任何效果。如果z索引不需要，那么就不要使用z索引属性。。只需使用代码的其余部分，唯一的效果是，值与询问者的情况略有不同，但询问者希望内部元素看起来不透明。这不会达到这个目的。背景图像：url（'image/img2.jpg'）；背景重复：重复-x使用一些图像作为内部图像，然后使用这个什么？如果这是解决提问者问题的建议，那么应该在答案中。我猜op可能是在谈论半透明。你的答案有点缺少信息。。。我建议你先读，然后再读你的帖子：）虽然答案总是令人感激的，但这个问题是5年前提出的，已经有了一个公认的解决方案。请尝试通过提供答案来避免将问题“撞”到顶部，除非该问题尚未标记为已解决，或者您找到了新的和改进的问题解决方案。还记得提供一些帮助来解释它。查看上的文档，了解如何使答案有价值的一些技巧：）即将放弃实现此效果，因为代码变得过于繁琐，无法保持简单易懂。然后我看到了这个。非常感谢。
.modalBackground
    {

        filter: alpha(opacity=80);
        opacity: 0.8;
        z-index: 10000;
    }

background-image:url('image/img2.jpg'); 
background-repeat:repeat-x;

<div id="divmobile" style="position: fixed; background-color: transparent;
    z-index: 1; bottom:5%; right: 0px; width: 50px; text-align:center;" class="div-mobile">