用透明色覆盖div或图像

Question

我有一个div，里面有一个图像。在图像上我有DB结果，设计和放置在每个div上的相对位置 我想要介绍一些结果（最有趣的一个是彩色叠加），请参见下图：

如果不在其上添加另一个div，我该怎么办呢？ backgroup在这里没有帮助，因为图像的z索引比div高。

我希望能够尽可能最简单地使用CSS，因为我将从数据库查询中获取属性，并为相关结果行设置类。

有人有创意吗？ ：）

感谢。

Answer 1

div {
    position: relative;
}
div:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 0, 0, .5);
}

您还可以更改top，right，bottom和left值，以覆盖图片边框中的叠加层。

Answer 2

嗯，在你拥有所有限制的情况下，我唯一能想到的就是：

div{background:#f00}
img{opacity:.5}

不是很优雅，但会起作用

Answer 3

谢谢大家，
所以我正在检查数据库中的属性，如果存在，我将新div作为结果Div的子项附加，这就是CSS：

div.cheapest {
 background: red;
 z-index:85;
 position:absolute;
 top:0px;
 left:0px;
 width:100%;
 height:100%;
 opacity:.3;
}