06: SVG naudojimas - SVG kaip fono paveikslėlis - CSS-gudrybės

SVG vaizdai taip pat gali būti naudojami kaip background-imageCSS, kaip ir PNG, JPG.webp ar GIF.

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

Važiuojant ateina tas pats nuostabus SVG, kaip lankstumas, išlaikant ryškumą. Be to, galite padaryti viską, ką gali padaryti rastrinis grafikas, pvz., Pakartoti.

Šiame vaizdo įraše apžvelgiame „suplyšusio popieriaus krašto“ efekto taikymą modulio apačioje per pseudo elemento fono vaizdą. Tam tikras tvarkingas būdas tai padaryti, kad pats pagrindinis elementas galėtų turėti tvirtą fono spalvą, kurią galime suderinti ir leisti puslapio fonui nukrauti per neigiamą vietą SVG. Be to, tam nereikia jokių žymėjimų. Šį efektą matėme HTML5Hub.

Žiūrėkite Chriso Coyierio (@chriscoyier) „Pen GAekv“ rašiklį „CodePen“.