06: Brug af SVG - SVG som baggrundsbillede - CSS-tricks

SVG-billeder kan også bruges som background-imagei CSS, ligesom PNG, JPG.webp eller GIF.

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

Al den samme skønhed af SVG følger med på turen, som fleksibilitet, samtidig med at skarpheden bevares. Plus, du kan gøre alt, hvad en rastergrafik kan gøre, som gentagelse.

I denne video ser vi på at anvende en “rippet papirkant” -effekt i bunden af et modul via baggrundsbillede på et pseudo-element. En slags pæn måde at gøre det på, så selve hovedelementet kan have en solid baggrundsfarve, som vi kan matche og lade sidebaggrunden bløde gennem det negative rum i SVG. Plus ikke brug for nogen markering for at gøre det. Vi så denne effekt på HTML5Hub.

Se Pen GAekv af Chris Coyier (@chriscoyier) på CodePen.