06: SVG - SVG: n käyttö taustakuvana - CSS-temppuja

SVG-kuvia voidaan käyttää samoin kuin background-imageCSS: ssä, aivan kuten PNG, JPG.webp tai GIF.

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

Kaikki samanlaiset SVG: n mahtavuudet ovat mukana matkan aikana, kuten joustavuus säilyttäen terävyyden. Lisäksi voit tehdä mitä tahansa rasterigrafiikka voi tehdä, kuten toistaa.

Tässä videossa tarkastelemme "repeytyneen paperireunan" vaikutuksen soveltamista moduulin pohjaan taustakuvan kautta näennäiselementille. Eräänlainen siisti tapa tehdä se, jotta pääelementillä itsellään voi olla kiinteä taustaväri, jonka voimme sovittaa ja antaa sivun taustan vuotaa läpi SVG: n negatiivisen tilan. Plus ei tarvitse mitään merkintöjä tehdäksesi sen. Näimme tämän vaikutuksen HTML5Hubissa.

Katso Chris Coyierin (@chriscoyier) Pen GAekv -kynä CodePenistä.