Question

我在SO和网络上都看到了很多这个问题。但它们都不是我想要的。

如何仅使用CSS为背景图像添加颜色叠加？

示例HTML：

<div class="testclass">
</div>

示例CSS：

.testclass {
    background-image: url("../img/img.jpg");
}

请注意：

我想通过仅使用CSS来解决这个问题。即我不想在div中添加一个子div＆＃34; testclass＆＃34;用于颜色叠加。
这不应该是＆＃34;悬停效果＆＃34;我想简单地在背景图像上添加一个颜色过度。
我希望能够使用不透明度，即我正在寻找一种允许RGBA颜色的解决方案。
我正在寻找一种颜色，让我们说黑色。不是渐变。

这可能吗？（如果没有，我会感到惊讶，但我还没有找到任何关于此的内容），如果是这样，最好的方法是什么呢？

所有的建议和建议都表示赞赏！

Answer 1

我看到两个简单的选择：

在图像上具有半透明单梯度的多个背景
hudge inset shadow

渐变选项：

html {
  min-height:100%;
  background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  }

影子选项：

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3);
  }

我的一个旧的codepen，只有很少的例子

第三个选项

with background-blen-mode：

background-blend-mode CSS属性设置元素的背景图像应如何相互混合以及元素的背景颜色。

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255,0,150,0.3);
  background-size:cover;
  background-blend-mode: multiply;
  }

Answer 2

您可以使用伪元素来创建叠加层。

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}

Answer 3

background-image需要多个值。

所以只需1种颜色线性渐变和css blend modes的组合即可。

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

请注意，IE / Edge上根本不支持CSS混合模式。

Answer 4

试试这个，它简单明了。我从这里找到了它：https://css-tricks.com/tinted-images-multiple-backgrounds/

{
  "Category" : {
    "01" : {
      "Name" : "Animals",
      "image" : "..."
    },
    "02" : {
      ...
    }
  }
}

如何为背景图像添加颜色叠加？

4 个答案: