为什么 :before 伪标签不向该图添加颜色叠加

Question

需要这个颜色叠加来覆盖这个图像，但它不需要。使用 figure/figcaption 甚至可能吗？我真的不明白为什么这不起作用我在我网站的其他几个地方为 class 设置了这样的设置。谢谢。 HTML

<figure>
<img src="img/cala.jpg">
<figcaption>About This</figcaption>
</figure>

CSS

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%;
}

谢谢

Answer 1

大多数浏览器不支持 img 上的 :before 和 :after 元素。改为在无形文字上试试。

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

Answer 2

:before 伪元素对 img 元素不起作用

Here is what the spec says...

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

为什么 :before 伪标签不向该图添加颜色叠加

why does the :before pseudo tag not add color overlay to this figure

html

css

pseudo-element