06: Sử dụng SVG - SVG làm ảnh nền - Thủ thuật CSS

Hình ảnh SVG cũng có thể được sử dụng background-imagetrong CSS, giống như PNG, JPG.webp hoặc GIF.

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

Tất cả những điều tuyệt vời tương tự của SVG đều mang đến cho chuyến đi, như sự linh hoạt trong khi vẫn giữ được độ sắc nét. Ngoài ra, bạn có thể làm bất cứ điều gì mà đồ họa raster có thể làm, chẳng hạn như lặp lại.

Trong video này, chúng ta xem xét việc áp dụng hiệu ứng "mép giấy bị xé" cho phần dưới cùng của mô-đun thông qua hình nền trên một phần tử giả. Đây là một cách làm gọn gàng để bản thân phần tử chính có thể có màu nền đồng nhất mà chúng ta có thể kết hợp và để cho nền trang chảy qua không gian âm trong SVG. Ngoài ra, không cần bất kỳ đánh dấu nào để làm điều đó. Chúng tôi đã thấy hiệu ứng này trên HTML5Hub.

Xem Pen GAekv của Chris Coyier (@chriscoyier) trên CodePen.