我有一个通过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,但这根本不起作用--我要么什么都不做更改,要么将整个背景变成一个简单的灰色,根本看不到背景图像。这是不可能的吗?
发布于 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。
发布于 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%)
),
发布于 2012-08-25 00:19:18
它将是overlay
属性https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay,但它是一个草案。不要依赖它
https://stackoverflow.com/questions/12112746
复制相似问题