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

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

12 339
css image-processing colors overlay png

12 ответов:

вы можете использовать фильтры с -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">

источник

420

возможно, вы захотите взглянуть на шрифты значков. 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>

здесь полная шпаргалка

-- edit--

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

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

EDIT 2:

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

52

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

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

да :)

Surfin 'Safari-архив блога" CSS Masks

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

я смог сделать это с помощью фильтра SVG. Вы можете написать фильтр, который умножает цвета исходного изображения с цветом, который вы хотите изменить. В приведенном ниже фрагменте кода, flood-color это цвет, который мы хотим изменить цвет изображения (который является красным в этом случае.) 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>
17

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

  • на <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" />

фоновые изображения

вы можете применить эту технику к фоновому изображению:

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}
<div id="original"></div>

<div id="changed"></div>

JavaScript

вы можете использовать JavaScript для установки фильтра во время выполнения:

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;
#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}
<div id="original"></div>

<div id="changed"></div>
15

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

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

.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 (применение цветового свопа при наведении курсора):http://codepen.io/chrscblls/pen/bwAXZO

14

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

генератор фильтров CSS для преобразования из черного в целевой шестнадцатеричный цвет

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

у вас есть, чтобы применить следующий фильтр, чтобы вам формате PNG 
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
7

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

вместо этого я создал 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>
6

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

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

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

3

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

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

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

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

  • url, находящийся в моем теге img, я помещаю его(и метку) в другой div, на котором ::after будет работать.
  • "mix-blend-mode" устанавливается на "difference" вместо "multiply" или "screen".
  • я добавил a ::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

2

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

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