背景颜色超过背景图像 - 原因是什么？

Question

我遇到了奇怪的问题（对于我作为 CSS 世界的初学者来说）。我试图在其顶部有一个带有透明颜色的背景图像。图像是主页背景：

body {

font-family: 'Raleway', 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
background: rgba(0,0,0,.3) url('..img/image.jpg') no-repeat;
background-size: cover;

min-height: 100vh; }

这对我不起作用。不知道为什么？

我检查了开发工具，添加了单独的背景颜色，但效果不佳。我试图在这里找到解决方案：Semi-transparent color layer over background-image? 和 treid 提出的解决方案。不适合我。

但是当我添加类并创建此行时：

.body {
background: 
    linear-gradient(
    rgba(0, 0, 0,.5), 
    rgba(0, 0, 0,.5)
),
    url('../img/bg_image.jpg') no-repeat;
background-size: cover; }

有效！但我还是不知道为什么？

是特异性问题吗？也许有什么不同？如果有人可以回答我的问题（以 qucik 为例），我将不胜感激。

所以我自己找到的解决方案是上面的代码，但我不明白之前的尝试对我不起作用。

干杯，卡米尔

Answer 1

如文档中所述：

您可以将多个背景应用于元素。这些背景相互层叠，您提供的第一个背景位于顶部，最后一个背景列在后面。只有最后一个背景可以包含 背景颜色。

如果我们检查背景属性：

所以这作为背景无效：

body {
  background:rgba(255,0,0,0.5) ,url(https://lorempixel.com/400/200/);
}

但这是有效的：

body {
  background: linear-gradient(rgba(255,0,0,0.5),rgba(255,0,0,0.5)),url(https://lorempixel.com/400/200/);
}