CSS-эффект демонстрации штампа не работает в IE 11

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

Как уже упоминалось в комментариях, mix-blend-mode не поддерживается в IE и не поддерживается в 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

Answer 2

Не поддерживается в т.е.Лучше всего включить рабочий CSS как есть, а затем в медиа-запрос, т. Е. То есть, не отображать этот 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 */ 
}