多个背景和颜色不透明度

Question

我试图找出一些东西.

我有一个简单的网页,图案背景重复,我想在CSS中做的是使用多个背景创建一个颜色叠加.我的代码就是这个.

html,body {
background: 
rgba(200, 54, 54, 0.5),
url(../img/background.png) repeat;
}

但它没有任何显示,只是一个白色的屏幕,如果我切换背景位置并将图像放在顶部然后我可以看到它确实找到图像并显示但显然没有颜色叠加.

我是否错过了我认为这应该有效的方法？它不适用于html,body标签？

任何帮助是极大的赞赏.谢谢尼克

Answer 1

rgba()是一个颜色值.您最后一个背景图层中只能有一个颜色值 ; 在任何其他图层上指定颜色会使语法无效.¹

如果您需要使用半透明颜色覆盖背景图像,则一个元素的唯一解决方法是创建该颜色的图像并将其覆盖.但是,由于您尝试应用页面背景,因此您应该只需将颜色叠加应用于body图像即可html:

html {
    height: 100%;
    background: url(../img/background.png) repeat;
}

body {
    min-height: 100%;
    background: rgba(200, 54, 54, 0.5);
}

请记住,body需要覆盖整个区域html,否则您的颜色将只覆盖部分背景图像.以上height和min-height以上的样式强制执行此高度; 对于宽度,您需要确保body没有任何边距或宽度小于100%.

有关这两种方法html和body背景的更广泛的说明,请参阅此答案.

¹ _{令人费解的是,为什么除了底部之外的任何层都禁止使用颜色,因为存在使用alpha通道的颜色值并且您仍然可以使用具有相同Alpha通道的图像来处理它,并且浏览器仍然必须合成背景.但我想这就是它的样子.看起来这个限制在背景级别4中也不会得到解决,所以我知道什么.}