06: Använda SVG - SVG som bakgrundsbild - CSS-tricks

SVG-bilder kan också användas som background-imagei CSS, precis som PNG, JPG.webp eller GIF.

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

SVG kommer med samma fantastiska känsla under resan, som flexibilitet och samtidigt behåller skärpan. Dessutom kan du göra allt som en rastergrafik kan göra, som att upprepa.

I den här videon tittar vi på att applicera en ”rippad papperskant” -effekt på botten av en modul via bakgrundsbild på ett a-pseudo-element. Typ av ett snyggt sätt att göra det så att huvudelementet i sig kan ha en solid bakgrundsfärg som vi kan matcha och låta sidobakgrunden blöda genom det negativa utrymmet i SVG. Plus behöver inte någon markup för att göra det. Vi såg denna effekt på HTML5Hub.

Se Pen GAekv av Chris Coyier (@chriscoyier) på CodePen.