texto - Tinte de imagen usando CSS sin superposición

poner un elemento encima de otro css

Question

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

Intentos fallidos

• Administrado para teñir el sepia de la imagen o un color arbitrario utilizando hue-rotate pero no pudo encontrar una manera de matizarlo con un color específico.
• Crear un filtro SVG " -webkit-filter: url(#tint) " y llamarlo con -webkit-filter: url(#tint) no funciona en Chrome.
• Todas las combinaciones posibles de propiedades css de opacity / box-shadow con filtros de drop-shadow / drop-shadow 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?

Answer 1

¿Qué tal una capa subyacente?

HTML:

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

CSS:

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

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

Answer 2

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/

Answer 3

Eventualmente lo será, usando shaders . 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

• David Walsh en filtros de CSS
• : aplicar un tinte de rosa ... :
• W3C Filter Effects 1.0 Docs - 38.2.5. Otras variables uniformes: los parámetros de sombreadores CSS

Actualización :

Adobe lanzó sus CSS Filter Labs basados ​​en HTML5 con soporte para filtros personalizados (Shaders) en navegadores compatibles:

Answer 4

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

Combina sepia para unificar el color, luego cambia el tono al color que deseas que esté teñido con

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

Utilizo bordes con un valor alfa para mis tintes, es realmente una superposición pero no usa ningún elemento DOM adicional, haciendo que la transición a sepia + hue-rotar sea más simple cuando los otros navegadores obtienen esos filtros.

Answer 5

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

Un matiz en cualquier color (en lugar de filtros sepia o de rotación que no se admiten en todas partes) podría lograrse mediante una sombra de cuadro insertada, en el tamaño apropiado.