制作背景颜色重叠背景图像，无需额外的HTML

Question

今天，我想知道在使用background-color时，background-image如何重叠rgba，不透明度值较低。但是当我在FireFox中尝试这个时，图像会与颜色重叠。我将向您展示（下面）我尝试过的内容：

div {
   background-image: url("http://placehold.it/300x300");
   background-color: rgba(0,0,200,0.5);
}

我喜欢在图像上给出蓝色调，但它只显示背景而根本没有蓝色......这是div的图像结果：

但是期望的效果应如下所示（下图）：

如果在此过程中不使用任何额外的HTML，我将如何获得此效果？

---

EXTRA

JSFiddle

Answer 1

您可以使用:before或:after伪元素作为颜色。

#result {
  background-image: url("http://placehold.it/300x300");

  /* Other stuff */
  width:300px;
  height:300px;
  position: relative;
}

#result:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,200,0.5);
}

<强> Fiddle