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

465

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

css  image  colors  png  overlay 
— Wesley
источник
4
Вы можете установить background-colorсвойство CSS. Вы можете создать непрозрачную часть, которая будет фиксированной, и прозрачную часть изображения, которая будет заполнена любым цветом, который вам нравится, с помощью CSS. Это то, что вы хотите достичь?
— jakub.g
2
@qbk, это стоит ответа, а не просто комментарий. И вы били меня на 1 секунду, технически.
— Кирилл G
2
Вы можете использовать psuedo-элементы с режимом смешивания, чтобы перекрасить любой значок, который на 100% черный или 100% белый (фон остается прозрачным). Смотрите мой ответ здесь: stackoverflow.com/a/39796437/1472114
— chrscblls

Ответы:

570

Вы можете использовать фильтры с -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
Но будет ли huerotate или saturate действительно делать муравейник к белому изображению?
— Кит
6
Обновление 2016: теперь это работает почти во всех браузерах, кроме IE: caniuse.com/#feat=css-filters
— Stan
4
@datatype_void Иногда вы сами не контролируете начальное изображение. Итак, кажется, что вы согласны с тем, что моя точка зрения верна, вы не можете получить любой цвет, начиная с черного или белого. О, и я играл более 5 минут, чтобы прийти к такому выводу.
— AsGoodAsItGets
5
также укажите, что вы можете делать такие вещи: .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }это означает, что вы МОЖЕТЕ перейти от черного и прозрачного или в оттенках серого к цвету, и это работает даже на анимированных GIF-изображениях
— tatsu
141

Я нашел этот замечательный пример codepen, в котором вы вставляете шестнадцатеричное значение цвета, и он возвращает необходимый фильтр для применения этого цвета к 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%);
— Anjan Biswas
Это замечательно!!
— Тьяго Пирес
2
Автор заслуживает статуи! (обратите внимание на: яркость (0), насыщенный (100%) необязательный препенд, который убивает любые сомнения)
— Джеки
1
Если кому-то это нужно, вот преобразование TS этого кода: gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08
— dwjohnston
56

Возможно, вы захотите взглянуть на Icon шрифты. http://css-tricks.com/examples/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 Это бесплатно скачать. У них также есть несколько советов о том, как создавать свои собственные иконки шрифтов .

— Жюль Колле
источник
Font Awesome оправдывает свое название.
— HerrimanCoder
+1 за нестандартное мышление. И в настоящее время существуют простые в использовании онлайн-приложения, которые помогут вам создать веб-шрифт из изображения (svg).
— Иван Вандер Санден
Если <a class="icon-thumbs-up"> </a> - это старое имя класса, а <a class="fa fa-thumbs-up"> </a> - новое, я не думаю, что это делает CSS меньше, я могу видеть дополнительный пробел между fa и fa-thumbs-up, добавить по крайней мере 1 дополнительный байт в этот файл CSS, если я не ошибаюсь?
— Брандито
Font Awesome был великолепен в свое время, к сожалению, его блокировка рендера делает Google и пользователей несчастными. Сначала мы решили эту проблему, удалив неиспользуемые шрифты из файлов CSS и двоичных шрифтов, сократив данные примерно вдвое. Сейчас мы находимся в процессе полного удаления и замены простым спрайтом, который не блокирует рендеринг (DOM и CSSOM обрабатывают быстрее, а элементы на странице выглядят быстрее) и сократят данные еще на 75%, до 6 КБ. FA составляет около 100 КБ. Маски CSS могут помочь в нашем случае, но, вероятно, в этом нет необходимости.
— YK
25

Я был в состоянии сделать это с помощью фильтра 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>
Развернуть фрагмент

— Vasan Jiaramaneetwesin
источник
4
Человек, которого ты ограбил на этот ответ. Любой, кто хочет раскрасить изображения сверх того, что может сделать фильтр: оттенок-поворот - это способ сделать это.
— MaxPRafferty
23

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

<img src= 'stencil.png' style= 'background-color: red'>
— Кирилл Г
источник
147
Я хочу, чтобы белая часть была окрашена по-другому, а не прозрачная.
— Уэсли
2
лучшее решение, которое я нашел до сих пор. Очень жаль, что это сработает только в том случае, если вы будете использовать на своих сайтах сплошной фоновый цвет
— Jules Colle
8
@ Уэсли, вам нужно затем инвертировать изображение (чтобы белый бит стал прозрачным, а остальное белым), что вы можете сделать, используя ваш любимый редактор изображений и маски.
— Чарльз Гудвин
5
@CharlesGoodwin Это работает только тогда, когда изображение помещается на белом фоне.
— Алекс
21

Да :)

Surfin 'Safari - Blog Archive »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 для таких случаев: w3.org/TR/SVG/masking.html
— feeela
3
К сожалению, это, кажется, только webkit, и блог обманывает, используя составные изображения, а не реальные примеры. Этот ответ немного красной сельди.
— Чарльз Гудвин
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>
Развернуть фрагмент

— Джон Слегерс
источник
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, чтобы сделать цвет светлее или темнее.

— Рехмат
источник
Ницца. Это позволяет избежать всех ограничений других решений здесь.
— cdonner
3
Повторите
— падающую
1
Решение GENIUS выглядит немного неопрятно в CSS, но с комментариями это вполне понятно. Спасибо!
— Ричард КемиКал Генерал Дентон
не получится получить точный цвет, это всегда какая-то смесь оригинального цвета с новым.
— 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 благодарит Даниэля
— Мутхукумара Анбалагана
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 с помощью инструментов dev, чтобы убедиться, что ваш CSS действительно применяется. Кроме того, убедитесь, что URL-адрес вашего изображения действителен, если вы не используете тот, который я предоставил. РЕДАКТИРОВАТЬ: Если фрагмент не работает для вас, вы можете использовать браузер, который устарел или не поддерживает функцию линейного градиента.
— rolznz
5

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

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

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

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

  • URL-адрес в моем теге img, я помещаю его (и метку) в другой div, на котором будет работать :: after.
  • «mix-blend-mode» установлен на «разность» вместо «умножение» или «экран».
  • Я добавил :: 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

— Salix
источник
3

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

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

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

— Pere
источник
1

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

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

— Bashirpour
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.