50％背景图像+ 50％背景颜色合二为一？

Question

CSS是否可以同时在一个div中应用背景颜色和背景图像？ 我想要这样。半图像，半色。忽略模糊效果，我不需要：

我想要这个的原因是因为我必须一直对其应用调整层以获得此效果。

Answer 1

背景颜色仅适用于背景图像的透明部分（如果两者都设置在元素上）。

您可以使用:before或:after创建一个伪元素，并将其用于颜色图层。

（如果你想把内容放在元素中，你应该使用伪元素作为背景图像）

.background {
  position: relative;
  background-color: rgba(200, 50, 50, 0.5);
  width: 500px;
  height: 400px;
  color:#fff;
}
.background:before {
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:url('http://lorempixel.com/500/400/cats/1') 0 0 no-repeat;
  z-index:-1;
}

<div class="background">
content here..
</div>