06: Використання SVG - SVG як фонового зображення - CSS-хитрощі

Зображення SVG можна використовувати як і background-imageв CSS, так само, як PNG, JPG.webp або GIF.

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

Незмінна SVG приходить для їзди, як гнучкість, зберігаючи різкість. Крім того, ви можете робити все, що може зробити растрова графіка, наприклад повторити.

У цьому відео ми розглядаємо застосування ефекту «розірваного краю паперу» внизу модуля за допомогою фонового зображення на псевдоелементі. Це якось акуратно, щоб зробити це так, щоб основний елемент міг мати суцільний колір фону, з яким ми можемо зіставитись, і дозволити фону сторінки пропускати крізь негативний простір у SVG. До того ж для цього не потрібна розмітка. Цей ефект ми побачили на HTML5Hub.

Дивіться Pen GAekv від Chris Coyier (@chriscoyier) на CodePen.