06: Usare SVG - SVG come immagine di sfondo - Trucchi CSS

Le immagini SVG possono essere utilizzate anche come background-imageCSS, proprio come PNG, JPG.webp o GIF.

.element ( background-image: url(/images/image.svg); )

La stessa bellezza di SVG si presenta per la corsa, come la flessibilità pur mantenendo la nitidezza. Inoltre puoi fare tutto ciò che può fare una grafica raster, come la ripetizione.

In questo video vediamo come applicare un effetto "bordo di carta strappato" alla parte inferiore di un modulo tramite un'immagine di sfondo su uno pseudo elemento. È un modo pulito per farlo in modo che l'elemento principale stesso possa avere un colore di sfondo a tinta unita che possiamo abbinare e lasciare che lo sfondo della pagina sfiori lo spazio negativo nell'SVG. Inoltre non è necessario alcun markup per farlo. Abbiamo visto questo effetto su HTML5Hub.

Guarda Pen GAekv di Chris Coyier (@chriscoyier) su CodePen.