css - 用透明颜色覆盖div或图像

Question

我有一个 div，里面有一张图片。在图像上，我有数据库结果，设计并放置在每个 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 值以从图片边框。