06: Използване на SVG - SVG като фоново изображение - CSS-трикове

SVG изображенията могат да се използват както background-imageв CSS, също като PNG, JPG.webp или GIF.

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

Една и съща страхотност на SVG идва и за пътуването, като гъвкавостта, като същевременно запазва остротата. Освен това можете да направите всичко, което може да направи растерна графика, като повторение.

В това видео разглеждаме прилагането на ефект на „изкъсан ръб на хартията“ в долната част на модула чрез фоново изображение върху псевдо елемент. Някакъв изискан начин да го направите, така че самият основен елемент да има плътен цвят на фона, който можем да съпоставим и да оставим фона на страницата да изтече през отрицателното пространство в SVG. Освен това не се нуждаете от никаква маркировка, за да го направите. Видяхме този ефект в HTML5Hub.

Вижте Pen GAekv от Chris Coyier (@chriscoyier) на CodePen.