SVG-pilte saab kasutada nagu background-imageCSS-is, täpselt nagu PNG, JPG.webp või GIF.
.element ( background-image: url(/images/image.svg); )Sõiduks tuleb kaasa sama SVG suurepärasus, nagu paindlikkus, säilitades samas teravuse. Lisaks saate teha kõike, mida saab teha rastergraafik, näiteks korrata.
Selles videos vaatleme, kuidas pseudoelemendile taustpildi abil mooduli põhja rakendada "ripitud paberiserva" efekti. Omamoodi korralik viis seda teha, nii et põhielemendil endal oleks kindel taustavärv, mille saame kokku sobitada ja lasta lehe taustal SVG negatiivsest ruumist läbi voolata. Lisaks pole selle tegemiseks vaja mingit märgistust. Seda efekti nägime HTML5Hubis.
Vaadake Chris Coyieri (@chriscoyier) Pen GAekv-i CodePenil.
Toimikud
- 06-rip.svg