Question

我有以下CSS代码段来准备橡皮图章效果，该效果在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>

Answer 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 */ 
}

Answer 2

正如评论所提到的，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

CSS展示图章效果在IE 11中不起作用

2 个答案: