在IE中替代CSS混合模式？

我使用這個背景，混合模式：在IE中替代CSS混合模式？

<a href="#" class="blend"> 
    <h3>Title</h3> 
    <p>Content goes here</p> 
</a>

它有一個網址爲背景圖像設置。當.blend懸停，它改變的背景是：

.blend:hover { 
    background-blend-mode:multiply; 
    background-color: rgba(0,0,0,.6); 
}

所以它的工作原理，但不是在IE（當然）。還有什麼替代方法？是否有某種我可以用來讓它在IE中工作的jQuery技巧？或者是否有我可以使用的前綴，如-ms-或類似的東西？

來源

2015-05-26 FranticJ3

您可能希望[' -MS-filter']（https://msdn.microsoft.com/en-us/library/ms530752（V = vs.85）的.aspx）。另見[這個問題]（http://stackoverflow.com/questions/25158696/blend-modemultiply-in-internet-explorer）。 – Blazemonger

過濾器將應用於整個元素，而不僅僅是背景。 – Shaggy

@Blazemonger：這個問題是我發現的第一個問題，但它似乎只適用於圖像（至少我能理解）。當我調用函數時，函數本身不斷返回錯誤。 – FranticJ3

不是我所知道的最佳解決方案，但是因爲IE和MS Edge不能使用background-blend-mode（http://caniuse.com/#feat=css-backgroundblendmode）。

我通過向元素添加一個:after類並通過background-colour操縱該元素，並在僞元素上使用opacity來解決此問題。

DEMO

https://codepen.io/nicekiwi/pen/PmZdMK

HTML

<div class="blend"></div>

CSS

.blend { 
    background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: cover; 
    width: 200px; 
    height: 200px; 
    position: relative; 
} 

.blend:after { 
    width: 100%; 
    height: 100%; 
    content: ''; 
    background-color: red; 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transition: opacity 0.3s; /* lets transition to be fancy ^_^ */ 
} 

.blend:hover:after { 
    opacity: 0.3; 
}

來源

2017-04-19 23:17:52 Nicekiwi

在IE中替代CSS混合模式？

回答

相關問題