CSS: цвет фона и значок - инвертирующие маски - PullRequest
Новая
       13

CSS: цвет фона и значок - инвертирующие маски

0 голосов
/ 30 мая 2018

здесь сложный вопрос.Давайте представим, что у меня есть div, с определенным размером (width и height) и background-color: pink;.Теперь предположим, что у меня есть значок, файл png (или svg или что-то еще), и я хочу, чтобы изображение «копалось» в цвет фона.Другими словами, я хочу, чтобы значок отображался прозрачным, а розовый - вокруг него.Как это: example Это как свойство mask-image, как раз наоборот.

Детали:

  • Нет необходимостисовместимость браузера (не для производственного использования)
  • Я не могу использовать ни Javascript, ни JQ (html / css)
  • И, конечно, я не могу редактировать файл png (чтобы инвертировать прозрачность иcolor;))

Вот два PNG для соответствия цвету фона:

stackoverflow pacman

Похожие:

Doребята, у вас есть какие-либо подсказки для достижения этого поведения?Дайте мне знать, если вам нужно больше деталей.

1 Ответ

0 голосов
/ 30 мая 2018

Возможно, вы захотите использовать filter: invert(1); на image внутри div:

Изображение не копается внутри div, но это визуально работает, если цвет за div - этотак же.(Я добавил другой цвет на теле, чтобы проиллюстрировать это нежелательное поведение) 

body{
  background: #ddd;
}

div {
  width: 200px;
  height: 140px;
  background-color: pink;
}

div img {
  /* You may want to add brightness(0) before invert for some images */
  filter: invert(1); 
}
<body>
  <div class="img_container">
    <img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
  </div>
  <p>Original image:</p>
  <img src="https://image.flaticon.com/icons/png/128/61/61072.png" />
</body>

Обратите внимание, что я не использовал ваши изображения, потому что они не только черные и прозрачные.

...