Question

我想制作类似于exporlor的win7文件效果：标题栏的不透明度小于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#outer的不透明度为0.8，然后让div#inner没有不透明度（不透明度= 1）。

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

有什么想法吗？

Answer 1

然而，似乎这不起作用。由于div #external的不透明度会影响div＃inner。
的不透明度

正确。

但如果你想要的只是一个半透明的背景，那么将RGBA color设置为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文档：https://developer.mozilla.org/en-US/docs/CSS/color

对于IE 7支持，我相信this（使用生成的背景图像文件）是可接受的解决方案。

Answer 2

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

跨浏览器的解决方法是避免使用嵌套元素并使用绝对定位。您可以在此处看到一个示例，其中不透明度应用于背景但文本的不透明度为1： http://www.pathtosharepoint.com/Lists/May2010/calendar.aspx?CalendarDate=5%2F5%2F2010

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

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

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

2 个答案: