html - 多重背景和颜色不透明度

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%。

参见 this answer有关 html 和 body 背景的更广泛的文章。

---

¹ _{考虑到带有 alpha channel 的颜色值存在并且您仍然可以使用 图像解决它，为什么除了底部层之外的任何层都禁止颜色，这是可以理解的 使用相同的 alpha channel ，浏览器仍然必须合成背景。但我想事情就是这样。看起来这个限制也不会在第 4 级背景中得到解决，所以我知道什么。}