過濾器：灰度並不總是在邊緣

工作，我可以看到它的工作在微軟的網站：https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/css3filters/過濾器：灰度並不總是在邊緣

但在網站上，我目前的工作，它只能部分時間。

例如，當我刪除img標籤上的最大寬度時，灰度突然起作用，但是當我將它懸停時，它停止工作。

過濾器最初是在一個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;}

來源

2016-12-02 nebulousGirl

終於找到了罪魁禍首，從我的僞元素去除的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;}

來源

2016-12-02 20:29:30 nebulousGirl

過濾器：灰度並不總是在邊緣

回答

相關問題