多个背景和颜色不透明度

Question

我试图找出一些东西。

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

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

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

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

非常感谢任何帮助。 谢谢 尼克

Answer 1

rgba()是color value。 You can only have a color value in the last background layer;在任何其他图层上指定颜色会使语法无效。 ¹

如果您需要使用半透明颜色覆盖背景图像，则一个元素的唯一解决方法是创建该颜色的图像并将其覆盖。但是，由于您尝试应用页面背景，因此您应该只需将颜色叠加层应用于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背景的两种方法的更全面的说明，请参见this answer。

---

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