添加滤镜:灰度到 img 元素会隐藏叠加元素

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-textdiv 提供 z 索引值来调整堆叠顺序。

这在规范中有所记录。

过滤器属性

如果

计算值 none 之外，则创建堆叠上下文 [CSS21] 的方式与 CSS 不透明度相同。

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

Answer 2

对不起，如果我不能发表评论，只能回答(由于积分和东西(

如果元素最初有过滤器，它的子元素将使用此元素作为包含块。如果过滤器已动态添加到元素，则它将隐藏溢出的子项。

尝试将一个类放入您的 img 并只在那里进行灰度，它可能会解决问题。此外，z 指数可能会有所帮助。