替代IE中的CSS混合模式？

Question

我正在使用background-blend-mode：

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

它為背景圖像設置了一個URL。 將.blend懸停時，它將背景更改為：

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

因此它可以工作，但不能在IE中使用（當然）。 有哪些替代方案？ 我可以使用某種jQuery技巧來使其在IE中工作嗎？ 還是有一個我可以使用的前綴，例如-ms-或類似的東西？

Answer 1

這不是我所知的最佳解決方案，但是由於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;
}