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

除了none之外的计算值导致创建堆叠上下文[CSS21]与CSS不透明度相同。

＆＃13;

.wrapper {
  position: relative;
}

.header-text {
  position: absolute;
  color: white;
  z-index: 1;
}

img {
  filter: grayscale(100%);
}

＆＃13;

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

＆＃13;

Answer 2

很抱歉，如果我无法发表评论，只能回答（由于积分和内容）

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

尝试将一个类放入你的img并只在那里做灰度，它可以做到这一点。此外，z-index可能有所帮助。

添加过滤器：灰度到img元素隐藏了重叠元素

2 个答案: