06: Az SVG - SVG használata háttérképként - CSS-trükkök

Az SVG képek ugyanúgy használhatók, mint background-imagea CSS-ben, akárcsak a PNG, JPG.webp vagy GIF.

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

Az SVG ugyanolyan fantasztikus, mint a rugalmasság, miközben megőrzi az élességet. Ráadásul bármit megtehet, amit egy raszteres grafikus megtehet, például megismételheti.

Ebben a videóban azt vizsgáljuk, hogy egy „elszakadt papírszél” effektust alkalmazunk-e egy modul aljára háttérkép segítségével egy álelemen. Valamilyen ügyes módja annak, hogy a fő elemnek legyen egy szilárd háttérszíne, amelyet össze tudunk illeszteni, és hagyjuk, hogy az oldal háttere elvérezzen az SVG negatív helyén. Plusz nem kell semmilyen jelölés ahhoz. Láttuk ezt a hatást a HTML5Hub-on.

Lásd Chris Coyier (@chriscoyier) Pen GAekv-jét a CodePen-en.