Изменить цвет изображения PNG с помощью CSS? - PullRequest
Новая
       118

Изменить цвет изображения PNG с помощью CSS?

384 голосов
/ 14 сентября 2011

Учитывая прозрачный PNG, отображающий простую форму в белом, возможно ли как-то изменить его цвет с помощью CSS? Какой-то оверлей или нет?

Ответы [ 14 ]

6 голосов
/ 08 ноября 2018

Самая простая строка, которая работала для меня: 

filter: opacity(0.5) drop-shadow(0 0 0 blue);

Вы можете настроить непрозрачность от 0 до 1, чтобы сделать цвет светлее или темнее.

3 голосов
/ 24 марта 2017

Ответ, потому что я искал решение для этого.

ручка в ответе @chrscblls работает хорошо, если у вас белый или черный фон, а у меня - нет.Кроме того, изображения были сгенерированы с помощью ng-repeat, поэтому у меня не может быть их URL в моем css, и вы не можете использовать :: after для тегов img.

Итак, я решил обойти и подумалэто может помочь людям, если они слишком спотыкаются здесь.

Так что я сделал почти то же самое с тремя основными отличиями:

  • URL-адрес в моем теге img.(и метку) в другом элементе div, в котором будет работать :: after.
  • «mix-blend-mode» установлен на «разность» вместо «multiply» или «screen».
  • Я добавил :: before с точно таким же значением, чтобы :: after выполнял «разницу» с «разницей», сделанной :: before, и отменил сам.

Чтобы изменить его с черного на белый или с белого на черный, цвет фона должен быть белым.От черного до цвета, вы можете выбрать любой цвет.От белого до цветов, вам нужно будет выбрать цвет, противоположный тому, который вы хотите. 

.divClass{
   position: relative;
   width: 100%;
   height: 100%;
   text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
   position: absolute;
   width: 100%;
   height: 100%;
   background: #FFF;
   mix-blend-mode: difference;
   content: "";
}

https://codepen.io/spaceplant/pen/oZyMYG

3 голосов
/ 12 августа 2014

Нет необходимости в полном наборе шрифтов, если вам нужен только один значок, плюс я чувствую, что он более «чистый» как отдельный элемент.Таким образом, для этой цели в HTML5 вы можете поместить SVG непосредственно в поток документов.Затем вы можете определить класс в таблице стилей .CSS и получить доступ к его цвету фона с помощью свойства fill:

Рабочая скрипта: http://jsfiddle.net/qmsj0ez1/

Обратите внимание, что в примеремы использовали :hover для иллюстрации поведения;если вы просто хотите изменить цвет для «нормального» состояния, вы должны удалить псевдокласс.

0 голосов
/ 03 июня 2015

Чтобы буквально изменить цвет, вы можете включить CSS-переход с -webkit-filter, где, когда что-то происходит, вы вызываете -webkit-filter по вашему выбору. Например: 

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }
Страница:
...