06: Использование SVG - SVG в качестве фонового изображения - CSS-хитрости

Anonim

Изображения 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