Html 为嵌套元素设置不同的不透明度

我想制作一个类似win7文件exporlor的效果：标题栏的不透明度小于1，而内容没有不透明度

然后，我尝试将两个元素组合在一起：

<div id="outer" style="background-color:black;opacity:0.6;padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;opacity:1;height:100%;"></div>
</div>

我想使

div#外部

的不透明度为0.8，然后使

div#内部

没有不透明度（不透明度=1）

然而，这似乎不起作用。因为

div#外部

的不透明度将影响

div#内部

的不透明度

有什么想法吗

然而，这似乎不起作用。因为div#outer的不透明度会影响div#inner的不透明度

对

---

但是如果你想要的只是一个半透明的背景，设置为

background color

可以满足需要。像这样：

<div id="outer" style="background-color: rgba(0,0,0,0.6);padding:30px;position:absolute;width:400px;height:400px;">
    <div id="inner" style="background-color:gray;height:100%;"></div>
</div>

---

有关更多信息，请阅读此处的MDN文档：

---

---

对于IE7支持，我认为（使用生成的背景图像文件）是一个可接受的解决方案。

内部div将继承其容器的不透明度

跨浏览器的解决方法是避免嵌套图元，而是使用绝对定位。您可以在此处看到一个示例，其中不透明度应用于背景，但文本的不透明度为1：

代码示例（两个跨度元素并排放置在主跨度内，第二个是获取不透明度的背景）：

上午11:00图像采集与维护；使用SharePoint的ECM
上午11:00图像采集与维护；使用SharePoint的ECM

+1，我需要打字更快。另外，不透明度也会影响文本。@Rox:这是否支持IE7+？@hguser至少不支持IE7。但由于IE7支持png透明度，我认为可以使用带有alpha通道的png作为背景图像。请按照我刚才在答案中添加的链接进行操作。@Rox:谢谢，我会试试的。

<span style="position:relative;display:inline-block;width:100%;height:100%;">
    <span style="width:100%;height:100%;display:inline-block;text-align:center;cursor:pointer;border:1px solid Red;position:absolute;color:Red;font-weight:bold;">
    11:00 AM  Image Capture &amp; ECM Using SharePoint
    </span>
    <span style="display:inline-block;width: 100%;height:100%;background-color:Red;text-align:center;border:1px solid;z-index:-1;filter:alpha(opacity=20);opacity:0.2;font-weight:bold;">
    11:00 AM Image Capture &amp; ECM Using SharePoint
    </span>
</span>