我有一个通过CSS设置的背景图像.
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}
我打算为网站的不同页面制作不同的背景图片：所以重要的是文字可以清晰地看出来.现在我有一个半透明的黑色背景到我这个中间的主要内容框,以确保可读性：
#main {
background: rgba(0,0.5);
}
但是,我真正想要做的是在整个背景图像中拥有这种半透明的背景,因为黑框看起来有点笨拙.我试过制作< div id =#tint>其中包括整个HTML文档,并给#tint提供rgba(0,0.5),但是这根本不起作用 – 我可以得到任何改变,也可以让整个背景变成一个简单的灰色,没有背景图像可见.这根本不可能吗？
解决方法
我想你需要创建一个覆盖元素(潜在的div),它具有寻找的半透明背景.就像是：
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0,0.7); /*can be anything,of course*/
}
当然还有一个演示：little link.
