Змінити колір зображення PNG за допомогою CSS?

464

Враховуючи прозорий PNG, що зображує просту форму в білому кольорі, чи можна якось змінити колір через CSS? Якась накладка чи що ні?

— Веслі
джерело

4

Ви можете встановити background-colorвластивість CSS. Ви можете створити непрозору частину, яка буде виправлена, і прозору частину зображення, яка заповниться будь-яким кольором, який вам подобається за допомогою CSS. Це ви хочете досягти?

— jakub.g

2

@qbk, на це варто відповісти, а не просто коментувати. І ви технічно мене побили 1 секунду.

— Кирило Г

2

Ви можете використовувати psuedo-елементи в режимі накладання для відновлення будь-якої піктограми, що має 100% чорний або 100% білий (фон залишається прозорим). Дивіться мою відповідь тут:

— stackoverflow.com/a/39796437/1472114

569

Ви можете використовувати фільтри з -webkit-filterта filter: Фільтри відносно нові для браузерів, але підтримуються у понад 90% браузерів відповідно до наступної таблиці CanIUse: https://caniuse.com/#feat=css-filters

Ви можете змінити зображення на відтінки сірого, сепію та багато іншого (подивіться приклад).

Тепер ви можете змінити колір файлу 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="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

Розгорніть фрагмент

_{Джерело}

— РАВИ
джерело

12

Так коротка відповідь, що для більшості браузерів не існує жодного загального рішення.

— Триларіон

18

Але чи вдасться хуеротату чи насичення зробити білим зображенням?

— Кіт

6

Оновлення 2016 року: тепер це працює майже в усіх браузерах, окрім IE: caniuse.com/#feat=css-filters

— Стан

4

@datatype_void Іноді ви не керуєте початковим зображенням самостійно. Тож, здається, ви погоджуєтесь, що моя думка справедлива, ви не можете дістати жодного кольору, починаючи з чорного чи білого. О, і я грав більше ніж 5 хвилин, щоб дійти цього висновку.

— AsGoodAsItGets

5

також уточнюйте, що ви можете робити такі речі: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }це означає, що ви МОЖЕТЕ перейти від чорного та прозорого або відтінку сірого до кольорового, і це працює навіть на анімовані gif

— tatsu

140

Я знайшов цей чудовий приклад кодексу, що ви вставляєте своє шістнадцяткове значення кольору, і він повертає необхідний фільтр, щоб застосувати цей колір до png

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

наприклад, мені потрібен мій png, щоб мати такий колір # 1a9790

то вам доведеться застосувати наступний фільтр до png

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

— Фаді Або Мсалам
джерело

12

<3 <3 <3 <3 <3 <3

— dwjohnston

2

Я змінив колір на білий з синього за допомогою цього коду:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);

— Анян Бісвас

Це чудово!!

— Тіаго Пірес

2

Автор заслужив статую! (зверніть увагу на: яскравість (0) насичення (100%) необов'язковий привід, що вбиває будь-які сумніви)

— Jackie Degl'Innocenti

1

Якщо комусь це потрібно, ось ТС перетворення цього коду gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08

— dwjohnston

56

Можливо, ви захочете подивитися на шрифти Icon. 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 Це безкоштовно завантажити. Вони також мають кілька порад щодо створення власних шрифтів значків .

— Жюль Колле
джерело

Шрифт Awesome відповідає своїй назві.

— HerrimanCoder

+1 для роздумів. На сьогоднішній день існують зручні в Інтернеті програми, які допоможуть вам створити веб-шрифт із (svg) зображення.

— yvan vander sanden

Якщо <a class="icon-thumbs-up"> </a> - це стара назва класу, а <a class="fa fa-thumbs-up"> </a> - новий, я не думаю, що це робить CSS менше, я можу побачити додатковий пробіл між fa і fa-thumbs-up, додати принаймні 1 додатковий байт до цього CSS-файлу, якщо я не помиляюся?

— Брандіто

Шрифт Awesome був чудовим у цей день, на жаль, його блокування візуалізації, що робить Google і його користувачів незадоволеними. Ми спочатку вирішили це, видаливши невикористані шрифти як з CSS, так і з бінарних файлів шрифтів, зменшивши дані приблизно вдвічі. Зараз ми повністю видаляємо і замінюємо простим спрайтом, який не блокує візуалізацію (DOM і CSSOM обробляються швидше, а елементи на сторінці відображаються швидше) і зменшать дані ще на 75%, до 6 КБ. FA становить близько 100 КБ. CSS-маски можуть допомогти в нашому випадку, але, ймовірно, непотрібними.

— YK

25

Мені вдалося це зробити за допомогою фільтра SVG. Ви можете написати фільтр, який помножує колір вихідного зображення з кольором, на який потрібно змінити. У фрагменті коду, наведеним нижче, колір заливки - це колір, на який ми хочемо змінити колір зображення (який у даному випадку є Червоним). Формула для 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>

Розгорніть фрагмент

— Vasan Jiaramaneetwesin
джерело

4

Чоловік, якого ти пограбуєш у цій відповіді. Кожен, хто хоче розфарбувати зображення поза межами фільтра: відтінок-обертання відтінку - це спосіб зробити це.

— MaxPRafferty

23

Тег img має фонове властивість, як і будь-яке інше. Якщо у вас білий PNG з прозорою формою, як трафарет, ви можете зробити це:

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

— Кирило Г
джерело

147

Я хочу, щоб біла частина була забарвлена по-різному, а не прозора частина.

— Веслі

2

найкраще рішення, яке я знайшов поки що. Шкода, що це спрацює лише в тому випадку, якщо ви використовуєте суцільний колір фону на своїх веб-сайтах

— Jules Colle

8

@Wesley вам потрібно потім перевернути зображення (таким чином білий біт стане прозорим, а решта білим), що можна зробити за допомогою улюбленого редактора зображень та масок.

— Чарльз Гудвін

5

@CharlesGoodwin Це працює лише тоді зображення розміщується на білому тлі.

— Алекс

21

Так :)

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)

— benhowdle89
джерело

1

Це частина будь-якого стандарту (ще не очікуваний), оскільки я не знайшов жодної інформації, що не стосується Webkit, чи це просто смак Apple? Схоже, W3 пропонує SVG для таких випадків використання

— feeela

3

На жаль, це здається лише веб-кайтом, і щоденник обманює, використовуючи складені зображення, а не фактичні приклади. Ця відповідь трохи червоної оселедця.

— Чарльз Гудвін

17

У більшості браузерів можна використовувати фільтри:

як на <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>

Розгорніть фрагмент

— Джон Slegers
джерело

6

Питання полягало у фарбуванні білого зображення з прозорим фоном. hue-rotateне працює на білому.

— Synetech

17

Подумайте, у мене є рішення для цього: а) саме те, що ви шукали 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

— chrscblls
джерело

Я відновив зображення із програми imgur, виникли проблеми з завантаженням.

— chrscblls

В останній версії Chrome схоже, що (прозорий) фон також набуває колір. У зв’язаному прикладі, коли я наведіть курсор, я просто бачу непрозорий рожевий квадрат ... Добре працює у Firefox.

— logidelic

1

@chrscblls Посилання мертва.

— Стівен Лу

15

Найпростіший один рядок, який працював для мене:

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

Ви можете налаштувати непрозорість від 0 до 1, щоб зробити колір світлішим або темнішим.

— Rehmat
джерело

Приємно. Це дозволяє уникнути всіх обмежень інших тут рішень.

— cdonner

3

повторіть розкриваються тінь 2-3 рази , щоб зробити його сильніше

— djdance

1

GENIUS SOLUTION, виглядає трохи безладним у CSS, але з коментарем це цілком зрозуміло. Дякую!

— Richard KeMiKaL GeNeRaL Denton

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

— swisswiss

такий підхід трохи спотворює зображення, і щоразу погіршується щоразу, коли застосовується тінь. Як і при копіюванні копії, результати відрізняються від оригіналу.

— SMAG

8

Я знайшов це під час гуглінгу, і я найкраще працював для мене ...

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/

— Мутукумар Абалаган
джерело

Це працює, я проголосував. Але тільки для запису у нього є такі проблеми, як неможливо розмістити фонове зображення, не можна розмістити зображення, і воно повторюється.

— Даніель

О, я справді не пробував цих ... спробуйте нижче посилання. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image дякую, Даніель

— Muthukumar Anbalagan

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>

Розгорніть фрагмент

— rolznz
джерело

Не працювало для мене. Не можу сказати чому, я копіюю вклеєні точно

— Вік Седоублєв

@VicSeedoubleyew фрагмент прекрасно працює. Перевірте свій div за допомогою інструментів розробки, щоб переконатися, що ваш CSS реально застосовується. Також переконайтеся, що URL-адреса вашого зображення є дійсною, якщо ви не використовуєте надану мною інформацію. EDIT: Якщо фрагмент не працює для вас, можливо, ви користуєтеся браузером, який або застарів, або не підтримує функцію лінійного градієнта.

— rolznz

5

Відповідаю, бо шукав для цього рішення.

ручка у відповіді @chrscblls працює добре, якщо у вас білий або чорний фон, але мій не був. Крім того, зображення генерувалися з ng-повтором, тому я не міг мати їх URL у своєму css І ви не можете використовувати :: after на тегах img.

Отже, я подумав про роботу навколо і подумав, що це може допомогти людям, якщо вони тут теж натрапляють.

Тому те, що я зробив, майже однакове з трьома основними відмінностями:

URL-адреса знаходиться в моєму тезі img, я помістив його (та мітку) в інший div, на якому :: after буде працювати.
режим "змішування-суміш" встановлюється на "різниця" замість "помножити" або "екран".
Я додав :: раніше з точно таким же значенням, щоб :: after зробив би "різницю" "різниці", яку зробив :: раніше, і скасував його.

Щоб змінити його з чорного на білий або білий на чорний, колір тла повинен бути білим. Від чорного до кольорів, ви можете вибрати будь-який колір. Від білого до кольорів тхо, вам потрібно вибрати протилежний колір потрібного.

.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

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

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

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

— Пере
джерело

1

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

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

— beta208
джерело

1

При зміні зображення з чорного на білий або з білого на чорний фільтр обертання відтінку не працює, оскільки чорно-білий не є кольорами технічно. Натомість зміни чорно-білого кольору (з чорного на білий або навпаки) необхідно здійснити із властивістю інвертного фільтра.

.img1 { filter: invert(100%); }

— Самуїл Станкевич
джерело

0

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

Розгорніть фрагмент

Джерело: https://codepen.io/taryaoui/pen/EKkcu

— Баширпур
джерело

Змінити колір зображення PNG за допомогою CSS?

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

<img> елементів

Фонові зображення

JavaScript

`<img>` елементів