html - 为什么:before pseudo tag not add color overlay to this figure

Question

需要这个颜色叠加来覆盖这个图像，但它不需要。这甚至可以用图形/图形说明吗？我真的不明白为什么这不起作用我在我的网站上的其他几个地方设置了这样的类(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

: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.