在 IE 中替代 CSS 混合模式？

【问题标题】：Alternative to CSS Blend Mode in IE?在 IE 中替代 CSS 混合模式？
【发布时间】：2015-05-26 17:51:41
【问题描述】：

我正在使用背景混合模式：

<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- 或类似的东西？

【问题讨论】：

您可能需要-ms-filter。另请参阅this question。
过滤器将应用于整个元素，而不仅仅是背景。
@Blazemonger：这个问题是我发现的第一件事，但它似乎只适用于图像（至少据我所知）。当我调用它时，函数本身不断返回错误。

标签： javascript jquery html css internet-explorer

【解决方案1】：

不是我所知道的最佳解决方案，但由于 IE 和 MS Edge 无法使用 background-blend-mode (http://caniuse.com/#feat=css-backgroundblendmode)。

我通过向元素添加:after 类并通过background-colour 对其进行操作并在伪元素上使用opacity 来解决此问题。

演示

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;
}

【讨论】：