06: SVG - SVG izmantošana kā fona attēls - CSS-triki

SVG attēlus var izmantot tāpat background-imagekā CSS, tāpat kā PNG, JPG.webp vai GIF.

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

Brauciena laikā tiek izmantotas visas tās pašas lieliskās SVG īpašības, piemēram, elastīgums, vienlaikus saglabājot asumu. Turklāt jūs varat darīt visu, ko var rastra grafika, piemēram, atkārtot.

Šajā videoklipā mēs aplūkojam “noplēstas papīra malas” efekta pielietošanu moduļa apakšdaļā, izmantojot fona attēlu uz pseido elementa. Veiksmīgs veids, kā to izdarīt, lai pašam galvenajam elementam varētu būt cieta fona krāsa, ko mēs varam saskaņot, un ļaut lapas fonam izplūst caur negatīvo vietu SVG. Turklāt nav nepieciešams nekāds uzcenojums, lai to izdarītu. Mēs redzējām šo efektu vietnē HTML5Hub.

Skatiet Kriss Koijera (@chriscoyier) Pen GAekv Pen Code.