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

Question

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

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

示例HTML:

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

CSS示例:

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

请注意:

• 我想通过仅使用CSS来解决这个问题.即我不想在div"testclass"中为颜色叠加添加一个子div.

• 这不应该是一个"悬停效果",我只想简单地在背景图像上添加一个颜色过度.

• 我希望能够使用不透明度,即我正在寻找一种允许RGBA颜色的解决方案.

• 我正在寻找一种颜色,让我们说黑色.不是渐变.

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

所有的建议和意见都表示赞赏!

Answer 1

我看到2个简单的选择:

• 多个背景与图像上的半透明单梯度
• 蜷缩插入阴影

渐变选项:

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

我的旧编码器,只有很少的例子

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/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}