mix-blend-mode funziona per alcuni browser, ma abbiamo scoperto che essa provoca prestazioni problemi in chrome, Non ho idea del perché.
Ci è questo genio incidere in cui si crea un layer che è per lo più trasparente, ma quando è posato su uno sfondo bianco, è il colore corrisponderà al colore dello sfondo circostante.
Non mi ricordo dove abbiamo trovato l'hack, se qualcuno sa dove è stato pubblicato, per favore fatemelo sapere nei commenti
Il modo in cui questo colore "magico" si trova; è calcolando quanto deve essere più scuro ogni asse del colore per la quantità di opacità rimossa. La formula per questo è 255 - (255 - x)/opacity. Il problema è: se l'opacità è impostata su un valore troppo basso, la formula ti dà numeri negativi (che non possono essere usati). Se l'opacità è troppo alta, otterrai delle colorazioni sulle parti non bianche dell'immagine.
Inizialmente abbiamo usato un foglio di calcolo che avrebbe eseguito i calcoli e attraverso la prova e l'errore manuale avremmo trovato il colore Goldilox.
Una volta iniziato a usare sass, mi sono reso conto che questo può essere ottenuto con una ricerca binaria. Così ho creato una funzione sass che fa il lavoro per noi.
Check out this gist su sassmeister. Passa il colore dello sfondo alla funzione opacitator sulla riga 56 del codice sass. e utilizzare il colore rgba generato in un div (o uno pseudo elemento) per sovrapporre l'immagine.
È possibile rendere trasparente lo sfondo dell'icona con strumenti come Photoshop. – Kedume
Non puoi fare ciò che vuoi con i CSS, devi usare uno strumento di modifica delle immagini, come diceva il commentatore precedente. – depa