06: Utilizarea SVG - SVG ca imagine de fundal - CSS-Tricks

Imaginile SVG pot fi folosite ca și background-imageîn CSS, la fel ca PNG, JPG.webp sau GIF.

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

Tot felul de minunat al SVG vine pentru călătorie, cum ar fi flexibilitatea, păstrând în același timp claritatea. În plus, puteți face orice poate face o grafică raster, cum ar fi repetarea.

În acest videoclip ne uităm la aplicarea unui efect „margine de hârtie ruptă” în partea de jos a unui modul prin fundal-imagine pe un pseudo-element. Un fel de mod îngrijit de a face acest lucru, astfel încât elementul principal în sine să aibă o culoare de fundal solidă pe care o putem asorta și să lăsăm fundalul paginii să sângereze prin spațiul negativ din SVG. În plus, nu este nevoie de niciun markup pentru ao face. Am văzut acest efect pe HTML5Hub.

Vedeți Pen GAekv de Chris Coyier (@chriscoyier) pe CodePen.