我正在尝试将半透明颜色图层添加到图像顶部以作为div的背景。我尝试过以下方法:
background: url('myImage.jpg'), rgba(0,0,0,0.5);
另外
background-image:url('myImage.jpg');
background-color:rgba(0,0,0,0.5);
但在这两种情况下只显示图像。我知道我可以将这个div用颜色包裹在另一个div中,但是有什么方法可以在一个div中完成所有这些吗?
答案 0 :(得分:5)
使用:after
选择器。它可以解决您的问题。
.container:after {
content: "";
display: block;
width: 300px;
height: 200px;
background-color:rgba(0,0,0,0.5);
}
示例在这里 - http://jsfiddle.net/ecYrS/2/
答案 1 :(得分:1)
CSS不支持您尝试本地执行的操作 - 您需要在图像上放置RGBa图层。您基本上需要在背景图像上设置半透明图层,但CSS将在背景图像上设置优先级,基本上覆盖任何背景颜色。
有一种想法是你可以尝试使用alpha透明的PNG,但我不是百分之百的。
答案 2 :(得分:-1)
@Flynn面临与您提到的相同的问题。我找到了一个非常方便的解决方案。
虽然有一种方法!
我们可以使用渐变来代替使用rgba()或hsla()的透明泛色。渐变在技术上是背景图像,因此不受规则的限制,它们不能在堆叠顺序中排在第一位(顶部)。
/* Working method */
.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}

如需了解更多信息,请浏览以下链接: