html - 添加过滤器 : grayscale to img elements hides overlaid elements

Question

由于一些有趣的小样式指南更改，所有图像都必须是黑白的。我认为全局样式可以解决这个问题:

img {
    filter: grayscale(100%)
}

然而，它就像一个魅力:位于图像顶部的元素突然消失。例如:位于横幅图像顶部的文本消失，位于图像顶部的 ::before 元素消失。

这是预期的行为还是有什么不祥之兆？

编辑:

HTML 没有什么特别的:

<div class="wrapper">
    <div class="header-text">
        <h2>My Header Text</h2>
    </div>
    <img src="myimage.png" />
</div>

.header-text 是绝对定位的。

Answer 1

过滤器会影响堆叠顺序，可以通过为 header-text div 提供 z-index 值来调整堆叠顺序。

这在规范中有记录。

Filter Property

A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity does.

.wrapper {
  position: relative;
}

.header-text {
  position: absolute;
  color: white;
  z-index: 1;
}

img {
  filter: grayscale(100%);
}

<div class="wrapper">
  <div class="header-text">
    <h2>My Header Text</h2>
  </div>
  <img src="http://www.placebacon.net/400/300?image=1" />
</div>