06: Using SVG - SVG as background-image - Triky CSS

SVG obrázky lze použít stejně jako background-imagev CSS, stejně jako PNG, JPG.webp nebo GIF.

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

Pro jízdu přichází stejná úžasnost SVG, jako je flexibilita při zachování ostrosti. Navíc můžete dělat cokoli, co může dělat rastrová grafika, například opakovat.

V tomto videu se podíváme na použití efektu „roztrženého okraje papíru“ na spodní část modulu pomocí obrazu pozadí na pseudoprvku. Nějaký úhledný způsob, jak to udělat, aby samotný hlavní prvek mohl mít plnou barvu pozadí, kterou můžeme porovnat a nechat pozadí stránky krvácet přes negativní prostor v SVG. Navíc k tomu není třeba žádné označení. Tento efekt jsme viděli na HTML5Hub.

Podívejte se na Pen GAekv od Chrisa Coyiera (@chriscoyier) na CodePen.