Html 为什么：before伪标记不向该图形添加颜色覆盖

需要此颜色覆盖以覆盖此图像，但不需要。如果有数字/图表，这可能吗？我真的不明白为什么这不起作用，我在我的网站上的其他几个地方也设置了这样的课程。 谢谢 HTML

---

谢谢

大多数浏览器不支持img上的

：before

和

：after

元素。在figcaption上试试吧

figure figcaption:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(11, 52, 150, 0.5);
}

---

：before

伪元素对

img

元素无效

注意。本规范未完全定义

：before

和

：after

与替换元素（如HTML中的IMG）的交互作用。这将在未来的规范中进行更详细的定义

---

不幸的是，您不能在图像元素上使用

：before

。请参阅：将

img

包装在

div

中，并将其添加到

div

中。感谢您提供的信息和链接共享这就是我的目的地，非常感谢！

figure {
}
figure img {
    width: 80%;
    position: relative;
}
figure > img:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(11, 52, 150, 0.5);
    z-index: 9001;
}
figcaption {
    text-align: right;
    margin-right: 10%;
}

figure figcaption:before {
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(11, 52, 150, 0.5);
}