用于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. 只需使用图像编辑程序并展平图层即可。（瘸！）
2. 使用js强制混合。（过度杀伤力）
3. 将IE定位为使用不透明度而不是精美的混合模式。

我认为选项三是合理的，但是如果您的主要客户或受众群体是IE繁重且视觉上非常敏锐的人，那么选项一将为您的模型提供最准确的表示。

您可以使用特定的样式表来定位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-前缀，并且在同一版本中支持背景混合模式，则可能需要重新访问此黑客，否则浏览器将同时应用不透明度和混合。绝不是世界末日，而是要注意的事情。