css - 背景颜色超过背景图像

问题描述

我遇到了奇怪的问题（对于我作为 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; }

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

我检查了开发工具，添加了单独的背景颜色，但效果不佳。我试图在这里找到解决方案：背景图像上的半透明颜色层？并提出了解决方案。没有为我工作。

但是当我将类添加到并创建以下行时：

.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 的解决方案是上面的代码，但我不明白之前的尝试对我不起作用。

干杯，卡米尔

标签： cssbackgroundbackground-imagebackground-colorcss-specificity

如文档中所述：

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

如果我们检查背景属性：

所以这作为背景无效：

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

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

问题描述

解决方案

推荐阅读