Изменить цвет изображения PNG с помощью CSS? - PullRequest
384 голосов
/ 14 сентября 2011

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

Ответы [ 14 ]

490 голосов
/ 05 января 2014

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

Источник

55 голосов
/ 13 ноября 2012

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

РЕДАКТИРОВАТЬ: я использую 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 Это бесплатно для скачивания. У них также есть несколько советов по , как создавать свои собственные иконки .

39 голосов
/ 20 июня 2018

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

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

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

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

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
26 голосов
/ 14 сентября 2011

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

<img src= 'stencil.png' style= 'background-color: red'>
23 голосов
/ 23 сентября 2015

Я смог сделать это с помощью фильтра 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>
20 голосов
/ 14 сентября 2011

Да:)

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)
16 голосов
/ 11 марта 2016

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

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

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

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


<img> elements

Вы можете применить эту технику к <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>
14 голосов
/ 30 сентября 2016

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

С любым белым 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 */
}

См. Этот кодовый блок (применение цветового свопа при наведении): http://codepen.io/chrscblls/pen/bwAXZO

7 голосов
/ 10 октября 2018

Я нашел это, когда гуглил, я нашел лучшую работу для меня ...

HTML

<div class="img"></div>

CSS

.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}

http://jsfiddle.net/a63b0exm/

7 голосов
/ 10 апреля 2017

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

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