用于Internet Explorer的后台混合模式替代方案

Question

我在我的网页上使用了背景混合模式，但IE并不支持它。

我该如何解决这个问题？

我在Chrome / Firefox上的页面：

我在IE上的页面：

我的CSS：

div#background-image-new {
background-image: url("/img/profile_pictures/bg.jpg");
/* z-index: -2; */
background-size: cover;
background-color: rgba(6, 18, 53, 0.75);
background-blend-mode: overlay;
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
z-index: -1;
}

Answer 1

我看到三种可能的解决方案：

1. 只需使用图像编辑程序并展平图层即可。 （LAME！）
2. 使用js强制混合。 （矫枉过正）
3. 目标IE使用不透明度而不是花式混合模式。

我认为选项三是合理的，但是如果您的主要客户或观众是IE重量级并且非常具有视觉辨识力，则选项1可以最准确地表示您的模型。

您可以使用特定样式表定位IE，或使用modernizr.js作为浏览器功能的测试。

您还可以使用一些快速且脏的IE css hacks：

//IE 9 and down
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

// IE 10 and 11
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    opacity: 0.8;
}

其他浏览器会忽略这些，但不是未来的证明。如果IE应该仍然在高对比度上使用-ms-前缀，并且在同一版本中支持背景混合模式，则可能需要重新访问此hack，否则浏览器将应用不透明度和混合。无论如何不是世界末日，而是需要注意的事情。

Answer 2

一个好的解决方案是使用伪类：before和单独的IE样式表。 对于css（例如：ie.css）

.my-background-class:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(6, 18, 53, 0.75);
  background-blend-mode: unset;
}

在你的html文件中，在head标签中：

<!--[if IE]>
<link rel="stylesheet" href="/css/ie.css">
<![endif]-->

来源：https://teamtreehouse.com/community/fallback-for-css-blending-modes