如何使用CSS对背景图像进行着色？
如何使用CSS对背景图像进行着色？
提问于 2012-08-24 23:53:28
我有一个通过CSS设置的背景图像。
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}我计划为网站的不同页面提供不同的背景图片:所以在它上面的文字清晰是很重要的。现在，为了确保易读性，我在中间的#main内容框中有一个半透明的黑色背景：
#main {
background: rgba(0, 0, 0, 0.5);
}然而，我真正想做的是在整个背景图像上有一个半透明的背景，因为黑盒看起来有点笨重。我试过制作一个包含整个HTML文档的<div id=#tint>，并将rgba(0，0，0，0.5)设置为#tint，但这根本不起作用--我要么什么都不做更改，要么将整个背景变成一个简单的灰色，根本看不到背景图像。这是不可能的吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-08-25 00:32:02
我认为你需要创建一个覆盖元素(可能是div)，它具有所寻找的半透明背景。类似于：
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}当然，还有一个小演示：little link。
Stack Overflow用户
发布于 2015-09-22 03:33:27
这对我来说很有效：
https://css-tricks.com/tinted-images-multiple-backgrounds/
.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);
}在另一个答案的基础上，你可以用现有的颜色来做到这一点，如下所示：
linear-gradient(
fade(@brand-primary, 50%),
fade(@brand-primary, 50%)
),Stack Overflow用户
发布于 2012-08-25 00:19:18
它将是overlay属性https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay，但它是一个草案。不要依赖它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12112746
复制相关文章
相似问题
腾讯云开发者
