¿Cambiar el color de la imagen PNG a través de CSS?

465

Dado un PNG transparente que muestra una forma simple en blanco, ¿es posible cambiar de alguna manera el color de esto a través de CSS? ¿Algún tipo de superposición o qué no?

css  image  colors  png  overlay 
— Wesley
fuente
44
Puede establecer la background-colorpropiedad CSS. Puede crear una parte no transparente que se reparará y una parte transparente de la imagen que se rellenará con cualquier color que desee a través de CSS. ¿Es eso lo que quieres lograr?
— jakub.g
2
@qbk, esto vale una respuesta, no solo un comentario. Y me ganaste por 1 segundo, técnicamente.
— Kirill G
2
Puede usar elementos psuedo con un modo de fusión para cambiar el color de cualquier ícono que sea 100% negro o 100% blanco (el fondo permanece transparente). Vea mi respuesta aquí: stackoverflow.com/a/39796437/1472114
— chrscblls

Respuestas:

570

Puede usar filtros con -webkit-filtery filter: los filtros son relativamente nuevos para los navegadores, pero se admiten en más del 90% de los navegadores de acuerdo con la siguiente tabla CanIUse: https://caniuse.com/#feat=css-filters

Puedes cambiar una imagen a escala de grises, sepia y mucho más (mira el ejemplo).

Entonces ahora puede cambiar el color de un archivo PNG con filtros.

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">
Expandir fragmento

Fuente

— РАВИ
fuente
12
Entonces, la respuesta breve es que no existe una solución general para la mayoría de los navegadores.
— Trilarion
18
¿Pero huerotate o saturar realmente hará que una imagen blanca aparezca en blanco?
— Keith
66
Actualización de 2016: esto ahora funciona en casi todos los navegadores, excepto IE: caniuse.com/#feat=css-filters
— Stan
44
@datatype_void A veces, usted no controla la imagen inicial. Entonces, parece que está de acuerdo en que mi punto es válido, no puede obtener ningún color a partir del negro o el blanco. Ah, y jugué durante más de 5 minutos para llegar a esta conclusión.
— AsGoodAsItGets
55
también especifique que puede hacer cosas como esta: lo .gifcorrect{ filter: invert(28%) sepia(100%) hue-rotate(-180deg) saturate(3); }que significa que PUEDE pasar de negro y transparente o escala de grises a color y funciona incluso en gifs animados
— tatsu
141

Encontré este gran ejemplo de codepen en el que inserta su valor de color hexadecimal y devuelve el filtro necesario para aplicar este color a png

Generador de filtros CSS para convertir de negro a color hexadecimal objetivo

por ejemplo, necesitaba que mi png tuviera el siguiente color # 1a9790

entonces tienes que aplicar el siguiente filtro a tu png

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
— Fadi Abo Msalam
fuente
12
<3 <3 <3 <3 <3 <3
— dwjohnston
2
He cambiado el color de blanco a azul usando este código:filter: invert(1%) sepia(1%) saturate(1%) hue-rotate(1deg) brightness(1000%) contrast(80%);
— Anjan Biswas
¡¡Esto es genial!!
— Thiago Pires
2
Autor merece una estatua! (tenga en cuenta: brillo (0) saturado (100%) prependiente opcional que mata cualquier duda)
— Jackie Degl'Innocenti
1
Si alguien lo necesita, aquí hay una conversión TS de este código gist.github.com/dwjohnston/7e60bf5d4b6c071cd869f9f346241c08
— dwjohnston
56

Es posible que desee echar un vistazo a las fuentes Icon. http://css-tricks.com/examples/IconFont/

EDITAR: Estoy usando Font-Awesome en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su <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">

Y luego continúe y agregue algunos enlaces de iconos como este:

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

Aquí está la hoja de trucos completa

--editar--

Font-Awesome usa diferentes nombres de clase en la nueva versión, probablemente porque esto hace que los archivos CSS sean drásticamente más pequeños y para evitar clases ambiguas de CSS. Entonces ahora deberías usar:

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

EDITAR 2:

Me acabo de enterar que github también usa su propia fuente de íconos: Octicons Se puede descargar gratis. También tienen algunos consejos sobre cómo crear sus propias fuentes de iconos .

— Jules Colle
fuente
Font Awesome hace honor a su nombre.
— HerrimanCoder
+1 para pensar fuera de la caja. Y hoy en día hay aplicaciones en línea fáciles de usar para ayudarlo a crear una fuente web desde una imagen (svg).
— yvan vander sanden
Si <a class="icon-thumbs-up"> </a> es el nombre de la clase anterior y <a class="fa fa-thumbs-up"> </a> es el nuevo, no lo creo hace que el CSS sea más pequeño, puedo ver un espacio en blanco adicional entre fa y fa-pulgares arriba, agregar al menos 1 byte adicional a ese archivo CSS si no me equivoco?
— Brandito
Font Awesome fue genial en su día, desafortunadamente su bloqueo de renderizado, lo que hace que Google y sus usuarios estén descontentos. Primero abordamos esto eliminando las fuentes no utilizadas tanto del CSS como de los archivos de fuentes binarias, reduciendo los datos a la mitad. Ahora estamos en el proceso de eliminar por completo y reemplazar con un sprite simple, que no es el bloqueo de renderizado (DOM y CSSOM se procesan más rápido, haciendo que los elementos en la página aparezcan más rápido), y reducirá los datos en otro 75%, hasta 6KB. FA es de alrededor de 100 KB. Las máscaras CSS pueden ayudar en nuestro caso, pero probablemente sean innecesarias.
— YK
25

He podido hacer esto usando el filtro SVG. Puede escribir un filtro que multiplique el color de la imagen de origen con el color al que desea cambiar. En el fragmento de código a continuación, el color de inundación es el color al que queremos cambiar el color de la imagen (que es Rojo en este caso). FeComposite le dice al filtro cómo estamos procesando el color. La fórmula para feComposite con aritmética es (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) donde i1 e i2 son colores de entrada para in / in2 en consecuencia. Entonces, especificar solo k1 = 1 significa que solo hará i1 * i2, lo que significa multiplicar ambos colores de entrada juntos.

Nota: Esto solo funciona con HTML5 ya que está usando SVG en línea. Pero creo que puede hacer que esto funcione con un navegador anterior al poner SVG en un archivo separado. No he probado ese enfoque todavía.

Aquí está el fragmento: 

<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>
Expandir fragmento

— Vasan Jiaramaneetwesin
fuente
44
Hombre, te están robando esta respuesta. Cualquiera que busque colorear imágenes más allá de lo que el filtro puede hacer: rotar el tono, esta es la forma de hacerlo.
— MaxPRafferty
23

La etiqueta img tiene una propiedad de fondo como cualquier otra. Si tiene un PNG blanco con una forma transparente, como una plantilla, puede hacer esto:

<img src= 'stencil.png' style= 'background-color: red'>
— Kirill G
fuente
147
Quiero que la parte blanca tenga un color diferente, no la parte transparente.
— Wesley
2
La mejor solución que encontré hasta ahora. Lástima que solo funcione si usa un color de fondo sólido en sus sitios web
— Jules Colle
8
@Wesley necesita invertir la imagen (para que el bit blanco se vuelva transparente y el resto blanco), lo que puede hacer con su editor de imágenes y máscaras favoritas.
— Charles Goodwin el
55
@CharlesGoodwin Eso solo funciona, entonces la imagen se coloca en un fondo blanco.
— Alex
21

Si :)

Surfin 'Safari - Blog Archive »Máscaras CSS

WebKit ahora admite máscaras alfa en CSS. Las máscaras le permiten superponer el contenido de un cuadro con un patrón que puede usarse para eliminar partes de ese cuadro en la pantalla final. En otras palabras, puede recortar a formas complejas basadas en el alfa de una imagen.
[...]
Hemos introducido nuevas propiedades para proporcionar a los diseñadores web un gran control sobre estas máscaras y cómo se aplican. Las nuevas propiedades son análogas a las propiedades de imagen de fondo y borde que ya existen.

-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
fuente
1
¿Es eso parte de algún estándar (aún por venir), ya que no encontré ninguna información no relacionada con Webkit, o es solo el sabor de Apple? Parece que el W3 está sugiriendo SVG para tales casos de uso: w3.org/TR/SVG/masking.html
— feeela
3
Lamentablemente, esto parece ser solo un kit web y el blog engaña mediante el uso de imágenes compuestas en lugar de ejemplos reales. Esta respuesta es un poco de arenque rojo.
— Charles Goodwin el
17

En la mayoría de los navegadores , puede usar filtros:

  • tanto en <img>elementos como en imágenes de fondo de otros elementos

  • y configúrelos estáticamente en su CSS, o dinámicamente usando JavaScript

Ver demostraciones a continuación.

<img> elementos

Puede aplicar esta técnica a un <img>elemento:

#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" />
Expandir fragmento

Imágenes de fondo

Puede aplicar esta técnica a una imagen de fondo:

#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>
Expandir fragmento

JavaScript

Puede usar JavaScript para establecer un filtro en tiempo de ejecución:

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>
Expandir fragmento

— John Slegers
fuente
66
La pregunta era sobre colorear una imagen blanca con un fondo transparente. hue-rotateNo funciona en blanco.
— Synetech
17

Creo que tengo una solución para esto que es a) exactamente lo que estaba buscando hace 5 años, yb) es un poco más simple que las otras opciones de código aquí.

Con cualquier png blanco (p. Ej., Icono blanco sobre fondo transparente), puede agregar un selector :: after para cambiar el color.

.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 */
}

Consulte este codepen (aplicando el cambio de color al pasar el mouse): http://codepen.io/chrscblls/pen/bwAXZO

— chrscblls
fuente
Reubiqué la imagen de imgur, tuve algunos problemas para cargarla.
— chrscblls
En la última versión de Chrome, parece que el fondo (transparente) también se está ajustando al color. En el ejemplo vinculado, cuando paso el mouse, solo veo un cuadrado rosa opaco ... Funciona bien en Firefox.
— logidelic
1
@chrscblls El enlace está muerto.
— Steven Lu
15

La línea más simple que funcionó para mí:

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

Puede ajustar la opacidad de 0 a 1 para que el color sea más claro o más oscuro.

— Rehmat
fuente
Agradable. Esto evita todas las limitaciones de las otras soluciones aquí.
— cdonner
3
repita la sombra
— paralela
1
SOLUCIÓN GENIUS, se ve un poco desordenada en el CSS, pero con un comentario, es perfectamente comprensible. ¡Gracias!
— Richard KeMiKaL GeNeRaL Denton
No funciona para obtener el color exacto, siempre es una especie de mezcla entre el color original y el nuevo.
— suizo
Este enfoque distorsiona ligeramente la imagen y empeora cada vez que se aplica sombra paralela. Al igual que hacer una copia de una copia, los resultados son diferentes del original.
— SMAG
8

Encontré esto mientras buscaba en Google, encontré el mejor trabajo para mí ...

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/

— Muthukumar Anbalagan
fuente
Esto funciona, he votado. Pero solo para el registro tiene algunos problemas, como no puede cambiar el tamaño de la imagen de fondo, no puede colocar la imagen y se repite.
— Daniel
Ohh, realmente no probé esos ... intente debajo del enlace. developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image gracias, Daniel
— Muthukumar Anbalagan
7

Requerí un color específico, por lo que el filtro no funcionó para mí.

En cambio, creé un div, explotando múltiples imágenes de fondo CSS y la función de gradiente lineal (que crea una imagen en sí misma). Si utiliza el modo de mezcla de superposición, su imagen real se combinará con la imagen de "degradado" generada que contiene el color deseado (aquí, # 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>
Expandir fragmento

— rolznz
fuente
No funciono para mi. No puedo decir por qué,
— copié
@VicSeedoubleyew el fragmento funciona bien. Inspeccione su div utilizando herramientas de desarrollo para asegurarse de que su CSS realmente se esté aplicando. Además, asegúrese de que la URL de su imagen sea válida si no está utilizando la que le proporcioné. EDITAR: si el fragmento no funciona para usted, es posible que esté utilizando un navegador que está desactualizado o que no admite la función de gradiente lineal.
— rolznz
5

Respondiendo porque estaba buscando una solución para esto.

la pluma en la respuesta @chrscblls funciona bien si tiene un fondo blanco o negro, pero el mío no. Además, las imágenes se generaron con ng-repeat, por lo que no pude tener su url en mi css Y no puedes usar :: after en las etiquetas img.

Entonces, pensé en solucionarlo y pensé que podría ayudar a las personas si también tropezaban aquí.

Entonces, lo que hice es más o menos lo mismo con tres diferencias principales:

  • la url está en mi etiqueta img, la puse (y una etiqueta) en otro div en el que :: after funcionará.
  • el 'modo de mezcla-mezcla' se establece en 'diferencia' en lugar de 'multiplicar' o 'pantalla'.
  • Agregué un :: before con exactamente el mismo valor para que el :: after hiciera la 'diferencia' de la 'diferencia' hecha por el :: before y lo cancelé.

Para cambiarlo de negro a blanco o de blanco a negro, el color de fondo debe ser blanco. Desde el negro hasta los colores, puede elegir el color que prefiera. Desde el blanco hasta los colores, deberá elegir el color opuesto al que desee.

.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
fuente
3

No es necesario un conjunto completo de fuentes si solo necesita un icono, además creo que es más "limpio" como un elemento individual. Entonces, para este propósito, en HTML5 puede colocar un SVG directamente dentro del flujo de documentos. Luego puede definir una clase en su hoja de estilo .CSS y acceder a su color de fondo con elfill propiedad:

Violín de trabajo: http://jsfiddle.net/qmsj0ez1/

Tenga en cuenta que, en el ejemplo, he usado :hoverpara ilustrar el comportamiento; si solo desea cambiar el color para el estado "normal", debe eliminar la pseudoclase.

— Pere
fuente
1

Para cambiar literalmente el color, puede incorporar una transición CSS con un filtro -webkit donde, cuando ocurra algo, invocaría el filtro -webkit de su elección. Por ejemplo:

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

Al cambiar una imagen de negro a blanco, o de blanco a negro, el filtro de rotación de tono no funciona, porque el blanco y negro no son técnicamente colores. En cambio, los cambios de color en blanco y negro (de negro a blanco o viceversa) deben hacerse con la propiedad de filtro invertido.

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

— Samuel stankiewicz
fuente
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>
Expandir fragmento

Fuente: https://codepen.io/taryaoui/pen/EKkcu

— Bashirpour
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.