06: Korištenje SVG - SVG kao pozadinske slike - CSS-trikovi

SVG slike mogu se koristiti kao i background-imageu CSS-u, baš kao i PNG, JPG.webp ili GIF.

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

Isti sjaj SVG-a dolazi i za vožnju, poput fleksibilnosti uz zadržavanje oštrine. Uz to možete učiniti sve što može i rasterska grafika, poput ponavljanja.

U ovom videozapisu gledamo na primjenu efekta "iščupanog ruba papira" na dno modula putem pozadinske slike na pseudo elementu. To je nekako uredno, tako da glavni element sam može imati čvrstu boju pozadine koju možemo podudarati i pustiti pozadinu stranice da procuri kroz negativni prostor u SVG-u. Osim toga, za to ne trebate nikakve oznake. Taj smo učinak vidjeli na HTML5Hubu.

Pogledajte Pen GAekv Chrisa Coyiera (@chriscoyier) na CodePenu.