06: Použitie SVG - SVG ako obrázka na pozadí - Triky CSS

SVG obrázky je možné použiť rovnako ako background-imagev CSS, rovnako ako PNG, JPG.webp alebo GIF.

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

Pre jazdu sa hodí rovnako úžasná verzia SVG, ako je flexibilita pri zachovaní ostrosti. Navyše môžete robiť čokoľvek, čo rastrová grafika, napríklad opakovať.

V tomto videu sa zameriavame na použitie efektu „roztrhnutého okraja papiera“ na spodnú časť modulu prostredníctvom obrázka pozadia na pseudoprvku. Je to nejaký úhľadný spôsob, ako to urobiť, aby samotný hlavný prvok mohol mať pevnú farbu pozadia, ktorú môžeme zladiť a nechať pozadie stránky krvácať cez negatívny priestor v SVG. Navyše na to nie je potrebné žiadne označenie. Tento efekt sme videli na HTML5Hub.

Prezrite si Pen GAekv od Chrisa Coyiera (@chriscoyier) na stránkach CodePen.