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中所述：

您可以将多个背景应用于元素。这些是分层的彼此提供的第一个背景和最后一个背景背面列出的背景。 只有最后一个背景可以包含 背景颜色。

如果我们检查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/);
}

Answer 2

css background属性实际上是各种属性的简写，正如here所述。其中一个属性是背景图像，此属性支持图像和渐变，但重要的是它还支持Multiple Background Images，考虑到这一点，您可以添加尽可能多的背景你喜欢相同的元素。

background: url(test.pnd), linear-gradient(...),...

在您的第一个示例中，您使用的是

rgba(0, 0, 0,.5),

这不是线性渐变，图像也不是背景颜色属性，这就是它无法工作的原因。

这个用法的一个很好的例子是背景[由Lea Verou创建的模式。]

The stacking order of multiple backgrounds，默认情况下，第一个位于顶部，然后从那里开始。 4

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

2 个答案: