用透明色覆盖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 作为结果 Div 的子项，这是 CSS：

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