CSS 展示邮票效果在 IE 11 中不起作用答案

【问题标题】：CSS showcasing stamp effect not working in IE 11CSS 展示邮票效果在 IE 11 中不起作用
【发布时间】：2019-03-21 20:58:10
【问题描述】：

我已经按照 CSS sn-p 准备了一个橡皮图章效果，该效果在 Google chrome、Firefox 中运行良好，但在 IE 11 中运行良好。知道我在这里犯了什么错误。在 IE11 中它看起来是黑色的。

    .stamp {
      position: relative;
      display: inline-block;
      color: red;
      padding: 15px;
      background-color: white;
      box-shadow:inset 0px 0px 0px 10px red;
      transform: rotate(-25deg);
      text-align:center;
    }

    .stamp:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: url("http://i.imgur.com/5O74VI6.jpg");
      mix-blend-mode: lighten;
    }

<p class="stamp"><span>COD</span><br>5c84b19c98b21f292c9d086f
        </p>

【问题讨论】：

对于初学者来说，Internet Explorer 根本不支持 mix-blend-mode 属性。
这两个属性在 IE 中引起问题。我们可以在 IE 中删除它们并在 chrome 中应用它们吗？想要使用 CSS 而不是任何 javascript 来做到这一点。尝试使用@media screen 和 (-ms-high-contrast: active), (-ms-high-contrast: none) 但没有运气。背景图像：url（“i.imgur.com/5O74VI6.jpg"）；混合混合模式：变亮；
你可以尝试this为IE添加一些CSS后备规则。再说一次，IE 不支持 mix-blend-mode。

标签： css internet-explorer

【解决方案1】：

在 ie 中不支持。您最好的选择可能是按原样包含工作的 css，然后在特定于 ie 的媒体查询中，不显示该 css 并有一个后备显示。

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
 /* IE10+ CSS styles go here */
}



@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

【讨论】：

【解决方案2】：

正如 cmets 所说，IE 不支持 mix-blend-mode，Edge 也不支持。

您可以通过以下方式查看：(1)https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode (2)https://caniuse.com/#search=blend

在我看来，根据您的代码和示例，如果您只想要纯 CSS，可能没有完美的解决方案。

但我的建议是您可以使用 Javascript polyfill 来尝试满足您的要求。更多内容可以参考这个链接：https://stackoverflow.com/a/32614511/10487763

【讨论】：