poner - ¿Hay alguna forma de colorear una imagen PNG en blanco solo con CSS?

filtros css

Question

Sé que hay muchos filtros css, especialmente para webkit, pero no puedo encontrar una solución para colorear una imagen blanca (#FFFFFF). He probado alguna combinación de los filtros, pero ninguno de ellos hace que mi imagen esté coloreada. Solo puedo cambiar la imagen en el rango de escala de grises o sepia.

Entonces, mi pregunta es: ¿hay alguna manera de cambiar mi png totalmente blanco a (por ejemplo) rojo usando solo css?

Como se muestra en esta imagen:

Answer 1

Esto se puede hacer con css masking, aunque desafortunadamente el soporte del navegador es realmente malo (creo que solo para webkit).

http://jsfiddle.net/uw1mu81k/1/

-webkit-mask-box-image: url(http://yourimagehere);

Debido a que su imagen es toda blanca, es un candidato perfecto para el enmascaramiento. La forma en que funciona la máscara es que siempre que la imagen sea blanca, el elemento original se muestre como normal, mientras que el elemento original no se mostrará negro (o transparente). Cualquier cosa en el medio tiene algún nivel de transparencia.

EDITAR :

También puede hacer que esto funcione en Firefox con la ayuda de svg .

http://jsfiddle.net/uw1mu81k/4/

div {
  width: 50px;
  height: 50px;
  mask: url(#mymask);
  -webkit-mask-box-image: url(http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png);
}

<div style="background-color: red;"></div>
<div style="background-color: blue;"></div>
<div style="background-color: green;"></div>
<div style="background-color: orange;"></div>
<div style="background-color: purple;"></div>

<svg height="0" width="0">
  <mask id="mymask">
    <image id="img" xlink:href="http://www.clker.com/cliparts/F/5/I/M/f/U/running-icon-white-on-transparent-background-md.png" x="0" y="0" height="50px" width="50px" />
  </mask>
</svg>

Answer 2

Esto se puede hacer con un filtro CSS que hace referencia a un filtro SVG (navegadores webkit + firefox). Aquí está el filtro SVG.

<svg width="800px" height="600px">
  <filter id="redden">
    <feColorMatrix type="matrix" values="1 1 1 0 0 
                                         0 0 0 0 0 
                                         0 0 0 0 0 
                                         0 0 0 1 0"/>
  </filter>

<image filter="url(#redden)" width="190" height="400" preserveAspectRatio="xMinYMin slice"  xlink:href="http://i.stack.imgur.com/e6MUC.jpg"/>
</svg>

Answer 3

Intenté colorear mi imagen de nube blanca siguiendo la respuesta de @zekkai, y luego escribí un filtro generador.

var slider_huerotate = document.getElementById("slider_huerotate");
var slider_brightness = document.getElementById("slider_brightness");
var slider_saturate = document.getElementById("slider_saturate");
var slider_sepia = document.getElementById("slider_sepia");

var output = document.getElementById("demo");
var cloud =  document.getElementById(''cloud'');
let [brightness , sepia, saturate, huerotate] = ["100", "80", "100","360"];
var filtercolor = `brightness/(${brightness}%/) sepia/(${sepia}/) saturate/(${saturate}/) hue-rotate/(${huerotate}deg/)`
output.innerHTML = filtercolor; // Display the default slider value
// Update the current slider value (each time you drag the slider handle)
slider_huerotate.oninput = function() {
huerotate = this.value;
var filtercolor = `brightness/(${brightness}%/) sepia/(${sepia}/) saturate/(${saturate}/) hue-rotate/(${huerotate}deg/)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_brightness.oninput = function() {
brightness = this.value;
var filtercolor = `brightness/(${brightness}%/) sepia/(${sepia}/) saturate/(${saturate}/) hue-rotate/(${huerotate}deg/)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_sepia.oninput = function() {
sepia = this.value;
var filtercolor = `brightness/(${brightness}%/) sepia/(${sepia}/) saturate/(${saturate}/) hue-rotate/(${huerotate}deg/)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

slider_saturate.oninput = function() {
saturate = this.value;
var filtercolor = `brightness/(${brightness}%/) sepia/(${sepia}/) saturate/(${saturate}/) hue-rotate/(${huerotate}deg/)`
    cloud.style.filter = filtercolor;
      output.innerHTML = filtercolor;
}

.slider {
    -webkit-appearance: none;
    width: 350px;
    height: 15px;
    border-radius: 5px;   
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

img{
  width:300px;
  z-index:100;
  filter: brightness(100%) sepia(80) saturate(100) hue-rotate(360deg);
  padding:70px 25px 50px 25px;
}

.wrapper{
  width:600px;
  height:500px;
  padding:50px;
  font-size:small;
}

.slidecontainer_vertical{
    margin-top: 50px;
   transform: translate(0,300px) rotate(270deg);
  -moz-transform: rotate(270deg);

}

.left{
  width:50px;
  height:300px;
  float:left;
}

.cloud{
  width:100%;
}

.middle{
  width:350px;
  height:300px;
  float:left;
  margin:0 auto;
}

.right{
  width:50px;
  height:300px;
  float:left;
}

#demo{
  width:100%;
  text-align:center;
  padding-bottom:20px;
  font-family: ''Handlee'', cursive;
  }

<head>
<link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
</head>
<div class="wrapper">
<div class=''left''>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="360" value="360" class="slider" id="slider_huerotate">
</div></div>
  <div class=middle>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_brightness">
</div>
<div id=''cloud''>
<img src="https://docs.google.com/drawings/d/e/2PACX-1vQ36u4x5L_01bszwckr2tAGS560HJtQz4qblj0jnvFUPSgyM9DAh7z_L3mmDdF6XRgu8FkTjqJKSNBQ/pub?w=416&amp;h=288"></div>
    <div id=''demo''></div>
<div class="slidecontainer">
  <input type="range" min="0" max="100" value="80" class="slider" id="slider_sepia">
</div>
  </div>
<div class=''right''>
<div class="slidecontainer_vertical">
  <input type="range" min="0" max="100" value="100" class="slider" id="slider_saturate">
</div></div>
</div>

Answer 4

Recientemente tengo la misma pregunta y creo que vale la pena compartir este enfoque para futuros lectores. Prueba esto

filter: brightness(50%) sepia(100) saturate(100) hue-rotate(25deg);

El brillo oscurecerá la imagen, la sepia la pondrá un poco amarillenta, se saturará para aumentar el color y, por último, la tonalidad girará para cambiar el color. Sin embargo, no es compatible con varios navegadores:

• No es compatible con IE

• En Chrome, hue-rotate(25deg) hará que cualquier imagen sea roja, pero necesita un valor negativo en Firefox, por ejemplo, hue-rotate(-25deg) para hacerlo en rojo.
  Puedes usar esto para dirigirte a los navegadores de Mozilla: https://css-tricks.com/snippets/css/css-hacks-targeting-firefox/

Estos son algunos consejos y herramientas útiles que he usado cuando trabajo con imágenes / íconos usando css:

• Si tiene la versión svg de la imagen, puede convertirla en iconos de fuente utilizando esta herramienta https://icomoon.io/ . Para cambiar el color solo necesitas el color:#f00; al igual que los colores de fuente.
• Si necesita lograr este efecto para el estado de desplazamiento, use imagen roja con filter: brightness(0) invert(); en el estado de no desplazamiento, y filter: brightness(1); en estado flotante. Hovever esto todavía no funcionará en IE
• Usa la hoja de sprites. Puedes crearte usando la herramienta de edición de imágenes o usar generadores de hojas de sprites disponibles en línea. Luego, puede usar SpriteCow para obtener el css para cada sub-imagen de su hoja de cálculo.