我有一个DIV，我想把一个模式作为背景。这个图案是灰色的。所以为了让它更漂亮一点，我想在上面加一个浅色透明的颜色“图层”。下面是我尝试过但没有成功的方法。有没有办法把彩色图层放在背景图像上?
这是我的CSS:
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
当前回答
请访问https://stackoverflow.com/a/18471979/193494查看我的回答，了解可能的解决方案的全面概述:
使用线性渐变的多个背景， 多个背景与生成的PNG，或 样式化:在伪元素之后作为次要背景层。
其他回答
你也可以添加不透明度叠加颜色。
而不是做
background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
你可以:
background: url('../img/bg/diagonalnoise.png');
然后为不透明度颜色创建一个新样式:
.colorStyle{
background-color: rgba(248, 247, 216, 0.7);
opacity: 0.8;
}
将不透明度更改为低于1的任意数字。然后将此颜色样式设置为与图像相同的大小。它应该会起作用。
# img-div { 身高:100 vh; 背景图片:url (https://images.pexels.com/photos/46160/field -云的天空-地球- 46160. - jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260”); 背景位置:中心; background-size:封面; 平铺方式:不再重演; 位置:相对; ｝ # overlay-div { Background-color: rgba(0,0,0,0.5); 身高:100 vh; 位置:相对; ｝ < div id = " img-div " > < div id = " overlay-div " > < / div > < / div >
从css技巧…有一个一步的方法来做到这一点，没有z索引和添加伪元素-需要线性梯度，我认为这意味着你需要CSS3支持
.tinted-image {
background-image:
/* top, transparent red */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* your image */
url(image.jpg);
}
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(0,0,0,0.6) 0),url(images/image.jpg);
请访问https://stackoverflow.com/a/18471979/193494查看我的回答，了解可能的解决方案的全面概述:
使用线性渐变的多个背景， 多个背景与生成的PNG，或 样式化:在伪元素之后作为次要背景层。
