режим mix-blend-mode не работает в браузерах webkit, когда элемент является прямым потомком тела - PullRequest
Новая
       4

режим mix-blend-mode не работает в браузерах webkit, когда элемент является прямым потомком тела

2 голосов
/ 13 февраля 2020

Я не могу получить изображение svg с fill="#fff" для отображения на белом фоне, используя mix-blend-mode: difference в таких браузерах, как chrome или edge.

Оно отлично работает в firefox. Проверьте эту скрипку для справки: JSFiddle

CSS

body {
  background-color: #fff;
}

.volume-icon {
  mix-blend-mode: difference;
}

HTML

<body>
  <img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
</body>

1 Ответ

1 голос
/ 22 февраля 2020

Вы столкнулись с проблемой, связанной с распространением фона, поскольку фон, примененный к body, имеет специальное поведение

Если вы рассматриваете другой контейнер, он будет работать нормально: 

div {
  background-color: #fff;
}

.volume-icon {
  mix-blend-mode: difference;
}
<div>
  <img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
</div>

С элементом body необходимо предоставить фон для html, отличный от прозрачного, и он будет работать: 

body {
  background-color: #fff;
}

.volume-icon {
  mix-blend-mode: difference;
}


html {
  background-color: #fff; /* even the same color will do the job */
}
<img class="volume-icon" src='https://svgshare.com/i/HxZ.svg'>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...