06: Bruke SVG - SVG som bakgrunnsbilde - CSS-triks

SVG-bilder kan også brukes som background-imagei CSS, akkurat som PNG, JPG.webp eller GIF.

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

All den samme fantastiske SVG kommer med på turen, som fleksibilitet mens du beholder skarpheten. I tillegg kan du gjøre alt en rastergrafikk kan gjøre, som å gjenta.

I denne videoen ser vi på å bruke en "rippet papirkant" -effekt på bunnen av en modul via bakgrunnsbilde på et pseudo-element. Litt av en fin måte å gjøre det slik at selve hovedelementet kan ha en solid bakgrunnsfarge vi kan matche og la sidebakgrunnen blø gjennom det negative rommet i SVG. Pluss ikke trenger noen markering for å gjøre det. Vi så denne effekten på HTML5Hub.

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