所有内容的网页 Div 叠加答案

【问题标题】：Web Page Div Overlay For All Contents所有内容的网页 Div 叠加
【发布时间】：2012-04-09 02:26:37
【问题描述】：

我有一个使用 CSS 设置样式的网页

网页的内容包含在 DIV 中。

Example:
<div id="container">
<div id="ticker">
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>

我希望容器 div 上的背景显示为半透明背景（以所需的颜色），然后 div 内的所有内容正常显示而没有透明度。

我尝试了一些方法，包括将不透明度应用于父 div，但它会将其应用于我不想要的所有子 div。

我该怎么做？

【问题讨论】：

标签： css layout html overlay opacity

【解决方案1】：

您可以为此使用rgba 值。像这样写：

#container{
 background:rgba(0,0,0,0.5)
}

对于 IE，有这样的过滤器：

    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)";  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */      
    zoom: 1;

您可以从这里生成您的 rgba 过滤器http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

【讨论】：

如果我在 BODY 样式标签中有一张图片作为背景怎么办？
您也可以提供图片，但图片会在您的网页加载时发送额外的 HTTP 请求。所以，最好用 css 来提供。

【解决方案2】：

您可以使用 rgba 值作为背景颜色，并将 alpha 值设置为所需的不透明度：

background-color:rgba(255,255,255,0.125);

http://www.w3schools.com/cssref/css_colors_legal.asp

【讨论】：

我不希望网页的背景图片是透明的。只有容器 div 包含网页的所有内容
在这种情况下，我建议在您的页面上放置一个代表您想要的背景图像的图像，并将其 z-index 设置为低于其任何兄弟姐妹。
或者另一种选择是将另一个 div 的背景图像设置为背景图像，然后将图像嵌入到该 div 的 background-image 属性上的 css 文件中。
为什么需要？使用我的第一个答案，容器 div 将是半透明的，第二个 div 将在其上设置您的背景图像。

【解决方案3】：

使用 1x1 背景图片（png），任意颜色，任意透明度，然后重复。

【讨论】：

我不希望网页的背景图片是透明的。只有容器 div 包含网页的所有内容。