Immagine tinta con CSS senza sovrapposizione

Question

È possibile sfumare un'immagine con un colore specifico utilizzando i CSS senza sovrapposizione in un browser WebKit?

tentativi falliti

• Gestito per colorare la seppia immagine o un colore arbitrario usando hue-rotate ma non riuscivano a trovare un modo per colorare con un colore specifico.
• Creare un filtro SVG "tinta" e chiamarlo con -webkit-filter: url(#tint) non funziona su Chrome.
• Tutte le possibili combinazioni di proprietà opacity/box-shadow css con i filtri drop-shadow/opacity non generano l'effetto desiderato.

Idee

• Dato un colore, non sarebbe possibile combinare i filtri HSB (hue-rotate, saturation, brightness) per generare la sua tinta?

Answer 1

Eventualmente, utilizzando gli ombreggiatori . Vedi i documenti W3C sui filtri.

Al momento, ciò che è possibile per esempio è:

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

Vedi

• David Walsh on CSS Filters
• Stackoverflow: apply a rose tint...:
• W3C Filter Effects 1.0 Docs - 38.2.5. Other uniform variables: the CSS shaders parameters

Aggiornamento:

Adobe rilasciato il suo HTML5 basato CSS Filter Labs con il supporto per custom filters (Shaders) sui browser supportati:

Answer 2

mentre non vi sono supporto del filtro da solo la tinta si può fare un po 'uno per composizione dei filtri esistenti senza ombreggiatura.

Combina seppia di unificare il colore, poi tinta-ruotare per il colore che si desidera essere colorato con

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

Io uso i bordi con un valore alfa per le mie tinte, la sua davvero una sovrapposizione, ma doesn' t utilizzare qualsiasi elemento DOM aggiuntivo per rendere più semplice la transizione a seppia + hue-ruotare quando gli altri browser ottengono tali filtri.

Answer 3

Che ne dici di un sottofondo quindi?

HTML:

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

CSS:

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

modificare il colore e l'opacità come si desidera. Non funziona davvero su immagini con trasparenza al loro interno.

Answer 4

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

Una tinta in qualsiasi colore (anziché filtri seppia o rotazione non supportati ovunque) potrebbe essere realizzato da un inserto box-ombra, nella dimensione appropriata.

Answer 5

Questo è possibile utilizzando un filtro SVG oggi senza dover utilizzare shader. Puoi usare questo come filtro CSS (anche se non funzionerà in IE) tramite il filtro -webkit: sintassi "url (#yourfilterID)" ecc.

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

demo Dinamica a http://codepen.io/mullany/details/baLkH/