添加过滤器：灰度到img元素隐藏覆盖元素

由于一些有趣的小样式指南更改，所有图像必须是黑色和白色。我想全球风格会照顾到这一点：添加过滤器：灰度到img元素隐藏覆盖元素

img { 
    filter: grayscale(100%) 
}

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

这是预期的行为，还是有什么邪恶的事情？

编辑：

的HTML是没有什么特别的：

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

.header-text绝对定位。

来源

2017-03-20 opticon

请分享你的HTML –

什么elelemts消失？ –

该过滤器会影响堆叠顺序，可以通过给header-text div指定z-index值来调整堆叠顺序。

这是规范中记录的。

Filter Property

的以外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>

来源

2017-03-20 15:13:22

很抱歉，如果我不能发表评论，只回答（由于分东西）

如果元素有过滤器最初，它的孩子们会使用这个元素包含块。如果过滤器已动态添加到元素，则会隐藏溢出的子元素。

试着把一个类放到你的img中，并且只在那里做灰度，它可以做到这一点。另外，z-index可能会有所帮助。

来源

2017-03-20 15:11:27

添加过滤器：灰度到img元素隐藏覆盖元素

回答

相关问题