css - 背景图像上的背景颜色 - 原因是什么？

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 为例)，我将不胜感激。

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

干杯，卡米尔

Answer 1

如 documenation 中所述:

You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

如果我们检查 background property :

所以这作为背景是无效的:

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/);
}