Filtro CSS in scala di grigi e background-blend-mode allo stesso tempo?

Question

Sto cercando di trattare un'immagine nello stesso modo in cui si trova in un file di Photoshop: desaturando l'immagine in scala di grigi e quindi applicando una sovrapposizione di colore con una modalità di fusione multipla. A tal fine, sto Styling immagine di sfondo CSS con ...

.someclass 
{ 
    /* grayscale */ 
    -webkit-filter: grayscale(1); 
    filter: gray; 
    filter: grayscale(1); 
    filter: url(desaturate.svg#greyscale); 

    /* multiply */ 
    background-color: rgba(190, 50, 50, 0.65); 
    background-blend-mode: multiply; 
} 

Il problema di questo è che il filtro in scala di grigi finisce desaturando di colore rosso per il metodo di fusione. In altre parole, il moltiplicarsi si verifica prima e poi la scala di grigi. Come si commuta in modo che la scala di grigi sia applicata per prima e quindi la modalità di fusione viene applicata per seconda?

Ho creato un violino (http://jsfiddle.net/g54LcoL1/1/) per il codice e uno screenshot (realizzato in Photoshop) di quello che mi aspetterei che il risultato del violino fosse simile. L'immagine più in basso, div.grayscale.multiply, dovrebbe essere colorata in rosso.

Answer 1

Non si può fare con il filtro, ma si può farlo stare con modalità di fusione per tutto

l'equivalente in scala di grigi in blend è la luminosità, con l'immagine come origine e un solido bianco come sfondo

così le immagini di sfondo, dal basso verso l'alto, sono:

1. bianco (come background-color)
2. vostra immagine
3. soli d rosso (che deve essere specificato come un gradiente per ora)

ed i metodi di fusione sono luminosità e moltiplicare

.test { 
 
    width: 400px; 
 
    height: 400px; 
 
    background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg"); 
 
    background-color: white; 
 
    background-blend-mode: multiply, luminosity; 
 
    background-size: cover; 
 
}

<div class="test"></div>

Answer 2

La modalità di fusione viene applicato agli strati di fondo, e quindi il filtro viene applicato all'intera elemento, quindi sono specie di fare con due cose diverse: dal momento che lo sfondo viene calcolata (incluso l'aspetto red-ish), l'intero elemento viene convertito in scala di grigi con il filtro.

C'è una funzione filter() proposta per i riferimenti alle immagini, quindi in teoria, dovresti essere in grado di applicare un filtro a qualsiasi immagine mentre viene caricata. Penso che questa è l'idea:

.someclass { 
    background-image: filter(cat.jpg, grayscale(100%)); 
    background-color: red; 
    background-blend-mode: multiply; 
} 

Purtroppo, io non credo che questo è implementato da nessuna parte, è solo nella bozza del Filtri spec.

In generale, l'ordine delle operazioni in termini di questi tipi di effetti CSS "post-elaborazione" è definito nello stesso ordine di SVG: il filtro viene eseguito prima, quindi ritagliata, quindi mascherata e quindi miscelata.

(Vedi il Blending & Compositing Spec.) Quindi, non c'è niente che tu possa fare in termini di modifica, temo.

Answer 3

Come Joel citato nel suo commento sotto la risposta accettata , è possibile farlo usando mix-blend-mode.

Nel mio esempio userò un'immagine reale invece di un'immagine di sfondo. Se deve essere un'immagine di sfondo, puoi comunque utilizzare la stessa tecnica. Basta sostituire l'immagine con un div vuoto che ha lo stile dell'immagine di sfondo.

Inoltre, userò la modalità di fusione "schermo" invece di "moltiplica" perché dimostra più chiaramente la rimozione del colore.

Con rimozione del colore:

.image-wrapper { 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
.image-wrapper img { 
 
    mix-blend-mode: screen; 
 
    filter: grayscale(100%); 
 
}

<div class="image-wrapper"> 
 
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/> 
 
</div>

senza rimozione del colore:

.image-wrapper { 
 
    background: red; 
 
    display: inline-block; 
 
} 
 

 
.image-wrapper img { 
 
    mix-blend-mode: screen; 
 
}

<div class="image-wrapper"> 
 
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/> 
 
</div>

Maggiori informazioni possono essere trovate qui:

https://css-tricks.com/almanac/properties/m/mix-blend-mode/