06: Uporaba SVG - SVG kot slike ozadja - CSS-triki

Slike SVG lahko uporabljamo tudi background-imagev CSS, tako kot PNG, JPG.webp ali GIF.

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

Pri vožnji je na voljo enaka izjemnost SVG-ja, kot je prilagodljivost in ohranjanje ostrine. Poleg tega lahko storite vse, kar lahko naredi rastrska grafika, na primer ponovite.

V tem videoposnetku pogledamo uporabo učinka "raztrganega roba papirja" na dno modula prek slike ozadja na psevdo elementu. Nekako lepo to naredimo, tako da ima lahko glavni element enobarvno barvo ozadja, ki jo lahko primerjamo, in pustimo, da se ozadje strani pretaka skozi negativni prostor v SVG. Poleg tega za to ne potrebujete oznak. Ta učinek smo videli na HTML5Hub.

Oglejte si Pen GAekv Chrisa Coyierja (@chriscoyier) na CodePen.