Изменить цвет изображения PNG через CSS?

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

Вы можете использовать фильтры -webkit-filter и filter : фильтры очень новы для браузеров и поддерживают только в самых современных браузерах. Вы можете изменить изображение в оттенки серого, сепия и многое другое (посмотрите на пример).

Теперь вы можете изменить цвет PNG-файла с помощью фильтров.

 body { background-color:#03030a; min-width: 800px; min-height: 400px } img { width:20%; float:left; margin:0; } /*Filter styles*/ .saturate { filter: saturate(3); } .grayscale { filter: grayscale(100%); } .contrast { filter: contrast(160%); } .brightness { filter: brightness(0.25); } .blur { filter: blur(3px); } .invert { filter: invert(100%); } .sepia { filter: sepia(100%); } .huerotate { filter: hue-rotate(180deg); } .rss.opacity { filter: opacity(50%); } 
  Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa Mona Lisa 

Возможно, вы захотите взглянуть на значки шрифтов. http://css-tricks.com/examples/IconFont/

EDIT: Я использую Font-Awesome в своем последнем проекте. Вы можете даже загрузить его. Просто поставьте это в свой :

    

И затем вперед и добавьте некоторые иконки-ссылки, как это:

  

Вот полный чит-лист

–редактировать–

Font-Awesome использует разные имена classов в новой версии, вероятно, потому что это делает файлы CSS значительно меньше и избегает двусмысленных classов CSS. Итак, теперь вы должны использовать:

  

EDIT 2:

Просто выяснилось, что github также использует собственный шрифт значка: Octicons. Его можно скачать бесплатно. У них также есть несколько советов о том, как создавать собственные шрифты значков .

Теги img имеют свойство фона, как и любое другое. Если у вас белый PNG с прозрачной формой, например, трафарет, вы можете сделать это:

  

Да 🙂

CSS Safari – Архив блога »Маски CSS

WebKit теперь поддерживает альфа-маски в CSS. Маски позволяют накладывать содержимое windows с шаблоном, который можно использовать для вырезания частей этого windows на конечном дисплее. Другими словами, вы можете привязать к сложным формам, основанным на альфах изображения.
[…]
Мы внедрили новые свойства, чтобы обеспечить веб-дизайнерам большой контроль над этими масками и их применение. Новые свойства аналогичны свойствам фона и пограничного изображения, которые уже существуют.

 -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image) 

Я смог сделать это с помощью SVG-фильтра. Вы можете написать фильтр, который умножает цвет исходного изображения на цвет, который вы хотите изменить. В нижеприведенном fragmentе кода флуд-цвет – это цвет, который мы хотим изменить цвет изображения (в данном случае это красный). FeComposite сообщает фильтру, как мы обрабатываем цвет. Формула feComposite с арифметикой равна (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), где i1 и i2 – входные цвета для in / in2 соответственно. Таким образом, указание только k1 = 1 означает, что он будет делать только i1 * i2, что означает умножение обоих входных цветов вместе.

Примечание. Это работает только с HTML5, поскольку используется встроенный SVG. Но я думаю, что вы сможете сделать эту работу со старым браузером, поставив SVG в отдельный файл. Я еще не пробовал этот подход.

Вот fragment:

                            

В большинстве браузеров вы можете использовать фильтры:

  • на обоих элементах и фоновых изображениях других элементов

  • и ставить их либо статически в вашем CSS, либо динамически используя JavaScript

См. Демонстрации ниже.


Элементы

Вы можете применить эту технику к элементу :

 #original, #changed { width: 45%; padding: 2.5%; float: left; } #changed { -webkit-filter : hue-rotate(180deg); filter : hue-rotate(180deg); } 
   

Думаю, у меня есть решение для этого: а) именно то, что вы искали 5 лет назад, и b) немного проще, чем другие варианты кода здесь.

С любым белым png (например, белый значок на прозрачном фоне) вы можете добавить селектор :: after после перекрашивания.

 .icon { background: url(img/icon.png); /* Your icon */ position: relative; /* Allows an absolute positioned psuedo element */ } .icon::after{ position: absolute; /* Positions psuedo element relative to .icon */ width: 100%; /* Same dimensions as .icon */ height: 100%; content: ""; /* Allows psuedo element to show */ background: #EC008C; /* The color you want the icon to change to */ mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */ } 

См. Этот codepen (с использованием swap цвета при наведении): http://codepen.io/chrscblls/pen/bwAXZO

Мне нужен определенный цвет, поэтому фильтр не работал для меня.

Вместо этого я создал div, используя многократные фоновые изображения CSS и функцию линейного gradleиента (которая сама создает изображение). Если вы используете режим наложения наложения, ваше фактическое изображение будет смешиваться с сгенерированным «gradleиентным» изображением, содержащим нужный вам цвет (здесь, # BADA55)

 .colored-image { background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png"); background-blend-mode: overlay; background-size: contain; width: 200px; height: 200px; } 
 

Я нашел этот отличный пример codepen, который вы вставляете в значение шестнадцатеричного цвета, и он возвращает необходимый фильтр для применения этого цвета к png

Генератор фильтра CSS для преобразования от черного к целевому шестнадцатеричному цвету

например, я нуждался в моем png, чтобы иметь следующий цвет # 1a9790

то вы должны применить к вам следующий фильтр png

 filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%); 

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

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

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

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

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

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

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

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

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

 .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

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

 img { -webkit-filter:grayscale(0%); transition: -webkit-filter .3s linear; } img:hover { -webkit-filter:grayscale(75%); } 
  • android изменить цвет текста элементов в прядильщике
  • Изменение цвета фона элементов ListView на Android
  • Формула для определения яркости цвета RGB
  • Как рассчитать средние значения цвета rgb растрового изображения
  • как преобразовать цвет rgb в int в java
  • Можно ли записать на консоль цвет в .NET?
  • Давайте будем гением компьютера.