Css 背景 div 上面有颜色图层

Question

伙计们，我有一个 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 中给布局 div 背景色：

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

它工作得很好，但这里的问题是 layout div 中的任何东西都有 0.9 opacity 我想要 layout div 只有 0.9 不透明度而不是里面的 divs

Answer 1

只需使用 RGBA 颜色即可。十六进制颜色 #1a1a1a 的不透明度为 0.9 rgba(26, 26, 26, 0.9)

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

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

Answer 2

使用：

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

然后根据需要设置文字颜色。

Answer 3

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

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

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

Css background div with color layer over it