6

我想做一个类似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#outer不透明度为0.8，然后使div#inner不透明度（不透明度= 1）。

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

有任何想法吗？

4

2 回答 2

7

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

正确的。

但是如果你想要的只是一个半透明的背景，那么设置RGBA 颜色就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 支持，我相信这（使用生成的背景图像文件）是一个可以接受的解决方案。

于 2013-01-14T05:30:03.583 回答
0

内部 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>
于 2013-01-22T18:25:27.657 回答