Изображения SVG можно использовать как background-image
в CSS, так и в PNG, JPG.webp или GIF.
.element ( background-image: url(/images/image.svg); )
Все те же преимущества SVG, например, гибкость при сохранении резкости. Кроме того, вы можете делать все, что умеет растровая графика, например повторять.
В этом видео мы рассмотрим применение эффекта «рваного края бумаги» к нижней части модуля с помощью фонового изображения на псевдоэлементе. Это своего рода изящный способ сделать это, чтобы у самого основного элемента мог быть сплошной цвет фона, который мы можем сопоставить, и позволить фону страницы просачиваться через негативное пространство в SVG. Кроме того, для этого не нужна разметка. Мы видели этот эффект на HTML5Hub.
См. Pen GAekv Криса Койера (@chriscoyier) на CodePen.
Файлы
- 06-rip.svg