06: Menggunakan SVG - SVG sebagai gambar latar - Trik CSS

Gambar SVG juga dapat digunakan background-imagedi CSS, seperti PNG, JPG.webp, atau GIF.

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

Semua kehebatan SVG yang sama hadir untuk pengendaraan, seperti fleksibilitas sekaligus mempertahankan ketajaman. Selain itu, Anda dapat melakukan apa pun yang dapat dilakukan oleh grafik raster, seperti mengulang.

Dalam video ini kita melihat penerapan efek "tepi kertas robek" ke bagian bawah modul melalui gambar latar belakang pada elemen pseudo. Jenis cara yang rapi untuk melakukannya sehingga elemen utama itu sendiri dapat memiliki warna latar belakang yang solid yang dapat kita cocokkan dan biarkan latar belakang halaman mengalir melalui ruang negatif di SVG. Ditambah tidak perlu markup apapun untuk melakukannya. Kami melihat efek ini di HTML5Hub.

Lihat Pena GAekv oleh Chris Coyier (@chriscoyier) di CodePen.