Tinte de imagen usando CSS sin superposición

¿Es posible teñir una imagen con un color específico usando CSS sin una superposición en un navegador WebKit?Tinte de imagen usando CSS sin superposición

Los intentos fallidos

Gestionado para teñir la sepia imagen o un color arbitrario usando hue-rotate pero no pudo encontrar una manera de teñir con un color específico.
Crear un filtro SVG "tint" y llamarlo con -webkit-filter: url(#tint) no funciona en Chrome.
Todas las combinaciones posibles de opacity/box-shadow Las propiedades CSS con drop-shadow/opacity filtros no generan el efecto deseado.

Ideas

Dado un color, ¿no sería posible combinar los filtros HSB (hue-rotate, saturation, brightness) para generar su tinte?

Fuente

2012-09-22 hpique

+16

me pregunto por qué la sepia tiene un tratamiento real. – hpique

He visto varias soluciones que se basan en un lienzo y javascript para hacer exactamente eso ... que es menos que ideal. –

Has hecho un error tipográfico con '-webkit-filter' en la pregunta. ¿Sería bueno confirmar que no hiciste el mismo error en tu código? ;-) – Spudley

Eventualmente lo será, usando sombreadores. Ver los documentos W3C sobre filtros.

Por el momento, lo que es posible, por ejemplo, es:

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/ 
-webkit-filter: brightness(50%);

Ver

actualización:

Adobe lanzado su HTML5 basado CSS Filter Labs con soporte para custom filters (Shaders) en los navegadores soportados:

enter image description here

Fuente

2012-09-22 18:28:25

shaders han sido desaprobados. ¡Acostúmbrate a hacer esto con los filtros! –

Si bien no hay independiente tinte filtro que puede hacer una clase de uno por composición de filtros existentes sin sombreado.

Combinar sepia para unificar el color, a continuación, hue-rotar al color que desea que se tiñe de

-webkit-filter: sepia(90%) hue-rotate(90deg);

utilizo fronteras con un valor alfa para mis tintes, es realmente una superposición pero doesn' Utilice cualquier elemento DOM adicional haciendo que la transición a sepia + hue-rotar sea más simple cuando los otros navegadores obtengan esos filtros.

Fuente

2013-10-24 10:28:57 krs

hue-rotate está prácticamente roto: realiza un trabajo muy impreciso con colores saturados, especialmente amarillos porque en realidad está haciendo una aproximación bastante pobre en el espacio RGB, no en el verdadero espacio HSL. –

A menos que me falta algo, esto en gran medida no funciona para las imágenes de blanco sobre negro, porque sepia y hue-rotate no afectan mucho al blanco. –

@GrantBirchmeier 'brillo (50%);' cambiará de blanco a gris. – GKFX

¿Qué tal una capa base entonces?

HTML:

<span class="tint"><img src="..." /></span>

CSS:

.tint { background-color:red; display:inline-block; } 
.tint img { opacity:0.8 }

ajustar el color y la opacidad como desee. Realmente no funciona en imágenes con transparencia en ellos.

Fuente

2013-11-20 16:04:17 DanMan

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

Un tinte en cualquier color (en lugar de los filtros de sepia o de rotación que no están soportadas en todas partes) se podría lograr por un recuadro box-shadow, en el tamaño apropiado.

Fuente

2014-06-10 20:21:22 Frevd

¡Por favor, añada también una explicación a su respuesta! –

Si esa es su respuesta, debería ser un comentario. – ChiefTwoPencils

allí tienes, espero que te haga feliz – Frevd

Esto es posible usando un filtro SVG hoy sin tener que usar sombreadores. Puede usar esto como un filtro CSS (aunque no funcionará en IE) a través de la sintaxis -webkit-filter: "url (#yourfilterID)" etc.

<svg width="800px" height="600px" viewbox="0 0 800 600"> 
    <defs> 
     <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB"> 
     <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                  .2 .2 .2 0 0 
                  .0 .0 .0 0 0 
                  0 0 0 1 0"/> 
     </filter>  
    </defs> 

<image x="0" y="0" width="550" height="370" preserveAspectRatio="true" 
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/> 
</svg>

demostración dinámica en http://codepen.io/mullany/details/baLkH/

Fuente

2015-06-20 01:09:17

¿Por qué no ha sido esto? ¿vota más? @Michael Mullany ¿hay alguna forma de que sepa traducir los colores hexadecimales a los valores de la matriz? – dopatraman

los valores de matriz están en una escala de 0 a 1, así que simplemente tome su valor hexadecimal y divídalo por 255 (o FF) para obtener los valores que desea. Por ejemplo, si quiere 100% rojo, la primera fila será 1 1 1 0 0. Si quiere 50% de verde, la segunda fila será 0.5 0.5 0.5 0 0, etc. –

Entiendo que las primeras 4 columnas son RGBA, pero ... ¿para qué sirve la quinta columna? – dopatraman

Tinte de imagen usando CSS sin superposición

Respuesta

Cuestiones relacionadas