06: Utilisation de SVG - SVG comme image de fond - Astuces CSS

Les images SVG peuvent également être utilisées comme background-imagedans CSS, tout comme PNG, JPG.webp ou GIF.

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

Tout le même génialité du SVG accompagne la conduite, comme la flexibilité tout en conservant la netteté. De plus, vous pouvez faire tout ce qu'un graphique raster peut faire, comme répéter.

Dans cette vidéo, nous examinons l'application d'un effet «bord de papier déchiré» au bas d'un module via une image d'arrière-plan sur un pseudo élément. Une sorte de manière élégante de le faire afin que l'élément principal lui-même puisse avoir une couleur d'arrière-plan unie que nous pouvons associer et laisser l'arrière-plan de la page saigner à travers l'espace négatif dans le SVG. De plus, pas besoin de balisage pour le faire. Nous avons vu cet effet sur HTML5Hub.

Voir le Pen GAekv de Chris Coyier (@chriscoyier) sur CodePen.