06: SVG verwenden - SVG als Hintergrundbild - CSS-Tricks

SVG-Bilder können background-imageebenso wie PNG, JPG.webp oder GIF wie in CSS verwendet werden .

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

Trotzdem ist SVG für die Fahrt beeindruckend, wie Flexibilität bei gleichzeitiger Beibehaltung der Schärfe. Außerdem können Sie alles tun, was eine Rastergrafik kann, z. B. Wiederholen.

In diesem Video sehen wir uns an, wie Sie einen "Ripped Paper Edge" -Effekt über ein Hintergrundbild auf ein Pseudoelement auf die Unterseite eines Moduls anwenden. Eine nette Art, dies zu tun, damit das Hauptelement selbst eine feste Hintergrundfarbe haben kann, die wir anpassen können, und den Seitenhintergrund durch den negativen Bereich in der SVG bluten lässt. Außerdem benötigen Sie kein Markup, um dies zu tun. Wir haben diesen Effekt bei HTML5Hub gesehen.

Siehe den Pen GAekv von Chris Coyier (@chriscoyier) auf CodePen.