06: SVG - SVG als achtergrondafbeelding gebruiken - CSS-trucs

SVG-afbeeldingen kunnen ook worden gebruikt zoals background-imagein CSS, net als PNG, JPG.webp of GIF.

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

Hetzelfde geweldige van SVG komt mee voor de rit, zoals flexibiliteit met behoud van scherpte. Bovendien kun je alles doen wat een rasterafbeelding kan doen, zoals herhalen.

In deze video kijken we naar het toepassen van een "gescheurd papierrand" -effect op de onderkant van een module via een achtergrondafbeelding op een pseudo-element. Een aardige manier om het te doen, zodat het hoofdelement zelf een effen achtergrondkleur kan hebben die we kunnen matchen en de pagina-achtergrond door de negatieve ruimte in de SVG kan laten bloeden. Plus geen opmaak nodig om het te doen. We zagen dit effect op HTML5Hub.

Zie de Pen GAekv door Chris Coyier (@chriscoyier) op CodePen.