Come si chiamano immagini senza sfondo

Scaricare immagini senza sfondo

In questo post vedremo come modificare un’immagine di sfondo per trasformarla in un’immagine monotona. Perché dovremmo volerlo fare? Beh, per esempio, per dare più presenza a un colore aziendale nella nostra pagina.

La chiave è background-size:cover; e background-attachment: fixed;. Ci sono altri CSS coinvolti che potrebbero interessarti e che puoi consultare nel codice di esempio alla fine del post, ma queste regole sono le più importanti.

Questo metodo è più semplice. Approfittiamo del fatto che in CSS3 possiamo usare diverse immagini di sfondo per convertire l’immagine in una falsa scala di grigi usando linear-gradient e background-blend-mode: saturation; e poi ci applichiamo il colore sopra con un’ombra interna usando box-shadow.

La proprietà background-blend-mode funziona in modo molto simile alle modalità di fusione dei livelli di Photoshop. Come curiosità, il valore di saturazione prende la saturazione degli elementi sopra (l’ombra interna) e lascia la tonalità e la luminanza di quelli sotto (nell’immagine di sfondo).