CSS背景div，上面有颜色层答案

【问题标题】：Css background div with color layer over itCSS背景div，上面有颜色层
【发布时间】：2016-03-29 21:59:12
【问题描述】：

伙计们，我有一个 html div，这是代码

<div id="mainBody"></div>

我在css中给了它一个背景图片，这是代码

#mainBody{background : url(../images/index/optimizedBackground.jpg) repeat 0 0;}

我想在上面加个颜色，但是这个颜色是不透明的，查看背景图片。

所以我使用了这段 html 代码并在第一个代码中添加了一个 div：

<div id="mainDiv"><div id="layoutDiv"></div></div>

我在 css 中为 layout div 设置了背景色：

#layoutDiv{
background-color : #1a1a1a;
opacity : 0.9;}

它工作得很好，但这里的问题是 layout div 内的任何东西都有 0.9 opacity 而我希望 layout div 只有 0.9 opacity不是里面的div

【问题讨论】：

【解决方案1】：

只需使用 RGBA 颜色。 HEX-Color #1a1a1a 的不透明度为 0.9 rgba(26, 26, 26, 0.9)

只需粘贴并删除不透明度。应该是这样的：

#layoutDiv{
    background-color : rgba(26, 26, 26, 0.9);}

【讨论】：

【解决方案2】：

使用：

背景色：rgba(26, 26, 26, 0.9);

然后将文本颜色设置为您需要的颜色。

【讨论】：

【解决方案3】：

使用 RGBA，样式将应用于特定元素。

    #mainDiv{ background-color : rgba(22,176,33,1); }

    #layoutDiv{ background-color : rgba(233,176,288,0.5) }

【讨论】：