过滤器：灰度并不总是在 Edge 中工作答案

【问题标题】：filter:grayscale not always working in Edge过滤器：灰度并不总是在 Edge 中工作
【发布时间】：2016-12-02 19:59:39
【问题描述】：

我可以在微软的网站上看到它：https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/

但在我目前正在开发的网站上，它只能工作几次。

例如，当我删除 img 标签上的 max-width 时，灰度突然起作用，但是当我将其悬停时，它停止工作。

过滤器最初是在一个img标签上，但我也在一个div上尝试了同样的结果。

我知道这可能是一个过于具体的案例，但我似乎找不到与此相关的任何可能有效的东西。是否有一些已知的属性会干扰 Edge 中的过滤器？

编辑

在检查器中调整之后，我发现隐藏伪元素可以解决灰度错误。

.Cta:before {
    position: absolute;top: 50%;left: 0;right: 0;bottom: 0;
    display: block;content: '';z-index: 1;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));
    background: -webkit-linear-gradient(top,hsla(0,0%,100%,0),#fff);
    background: linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff);
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}

代码示例

<div class="Cta">
    <div class="cta-image">
        <img src="{{baseUrl}}{{image}}" alt="{{title}}" />
    </div>
    <div class="cta-content">
        <h3 class="cta-title">{{{title}}}</h3>
        <h4 class="cta-subtitle">{{subtitle}}</h4>
    </div>
</div>

CSS：

.Cta {position:relative;}
.Cta .cta-image {filter:grayscale(100%);opacity:0.2;}
.Cta img {display:block;width:100%;}
.Cta .cta-content {position:absolute;bottom:0;left:0;right:0;padding:0 30px 30px;}

【问题讨论】：

标签： css microsoft-edge css-filters

【解决方案1】：

终于找到了罪魁祸首，从我的伪元素中删除 z-index 正在清除错误。

将 z-index 放在每个元素上以明确地告诉顺序而不是依赖浏览器默认值解决了未应用灰度过滤器的问题。

.Cta {position:relative;}
.Cta:before {position:absolute;top:50%;left:0;right:0;bottom:0;z-index:2;content:'';background:/*gradient*/;}
.Cta .cta-image {position:relative;z-index:1;filter:grayscale(100%);opacity:0.2;}
.Cta img {display:block;width:100%;}
.Cta .cta-content {position:absolute;bottom:0;left:0;right:0;z-index:3;padding:0 30px 30px;}

【讨论】：