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

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

ОТВЕТЫ

Ответ 1

Вы можете использовать фильтры -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%); }
<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">

Ответ 2

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

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

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">

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

<a class="icon-thumbs-up"></a>

Здесь полный чит-лист

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

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

<a class="fa fa-thumbs-up"></a>

ИЗМЕНИТЬ 2:

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

Ответ 3

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

<img src= 'stencil.png' style= 'background-color: red'>

Ответ 4

Да:)

Surfin 'Safari - Архив блога" Маски CSS

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

-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)

Ответ 5

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

С любым белым png (например, белый значок на прозрачном фоне) вы можете добавить a:: 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 */
}

См. этот код (применение swap цвета при наведении): http://codepen.io/chrscblls/pen/bwAXZO

Ответ 6

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

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

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

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

<img> элементы

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

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

Ответ 7

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

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

Вот фрагмент: 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

Ответ 8

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

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

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

Ответ 9

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

Вместо этого я создал div, используя несколько фоновых изображений CSS и функцию линейного градиента (которая сама создает изображение). Если вы используете режим наложения наложения, ваше фактическое изображение будет смешано с созданным "градиентным" изображением, содержащим нужный вам цвет (здесь, # 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;        
    }
<div class="colored-image"></div>

Ответ 10

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

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

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

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

  • url находится в моем теге img, я положил его (и метку) в другой div, на котором:: после работы.
  • 'mix-blend-mode' устанавливается в 'difference' вместо '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

Ответ 11

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

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }