Режим наложения фона на изображениях PNG

Короче говоря, я хочу, чтобы мое (любое) изображение меняло цвет при наведении, но я не могу заставить его работать хорошо на изображениях PNG. Проблема в прозрачности. Я не хочу наносить свой цвет на прозрачное пространство. Мой CSS выглядит так:

background-blend-mode: color-burn;
background-color: #edeb52;

Вот полный пример jsFiddle. Все, что я хочу, это избавиться от этого цвета вокруг значка, который должен быть прозрачным.

Источник

5 ответов

Решение

На вечеринку на 6 месяцев позже, но вы можете использовать CSS-свойство mask-image. Его экспериментальный, но довольно хорошо поддержанный:

.maskedimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
  -webkit-mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  -webkit-mask-mode: alpha;
  -webkit-mask-size: cover;
  mask-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  mask-mode: alpha;
  mask-size: cover;
}

.maskedimage.blue {
  background-blend-mode: luminosity;
  background-color: blue;
}

.maskedimage.red {
  background-blend-mode: luminosity;
  background-color: red;
}

.maskedimage:hover {
  background-blend-mode: multiply;
  background-color: red;
}
<div class="maskedimage original"></div>
<div class="maskedimage blue"></div>
<div class="maskedimage red"></div>

В качестве альтернативы вы можете получить аналогичный эффект, используя фильтры CSS:

.filteredimage {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-image: url("https://gameartpartners.com/wp-content/uploads/edd/2015/06/goblin_featured.png");
  background-size: cover;
}

.filteredimage.blue {
  filter: sepia(1) hue-rotate(170deg) brightness(45%) saturate(1000%);
}

.filteredimage.red {
  filter: sepia(1) hue-rotate(313deg) brightness(45%) saturate(1000%);
}

.filteredimage:hover {
  filter: sepia(1) hue-rotate(313deg) brightness(25%) saturate(1000%);
}
<div class="filteredimage original"></div>
<div class="filteredimage blue"></div>
<div class="filteredimage red"></div>

Ваш пробег может отличаться.

Источник

Это можно сделать с помощью css, но, к сожалению, поддержка браузера очень плохая (может быть только webkit).

https://jsfiddle.net/devefrontend/fowzemd2/2/

.image .img {-webkit-mask-box-image:'YOURIMAGEURL';}

и это может быть тот же вопрос, что и вы:

Есть ли способ раскрасить белое изображение PNG только с помощью CSS?

Источник

Попробуй вот так. Посмотрите, полезно ли это. я использовал filter недвижимость здесь.

.image {
  display: inline-block;

  
}
.image .img {
  width: 375px;
  height: 360px;
  background-image: url('http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png');
  background-size: cover;

-webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}
<div class="image">
  <div class="img"></div>
</div>

Источник

Это пример

Вы можете больше узнать это https://www.w3schools.com/howto/howto_css_image_overlay.asp

.container {
    position: relative;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {

  color: white;
  font-size: 16px;
width:400px; height:350px;
}
<div class="container">
  <img src="http://www.kaptest.co.uk/sites/kaptest.co.uk/files/pictures/icon-lightbulb-grey.png" alt="Avatar" class="image" style="width:100%">
  <div class="middle"  ">
    <div class="text">example</div>
  </div>
</div>

Источник

Это должно быть PNG? Желательно, чтобы вы могли использовать встроенный SVG. Таким образом, вы можете не только применить fill цвет по вашему выбору через css, но вы также получаете все преимущества векторной графики: четкость при любом размере и меньшем размере файла (не забудьте оптимизировать с помощью svgo)

Источник
Другие вопросы по тегам