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

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

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

Semua kehebatan SVG yang sama terdapat dalam perjalanan, seperti kelenturan sambil mengekalkan ketajaman. Anda juga boleh melakukan apa sahaja yang boleh dilakukan grafik raster, seperti mengulangi.

Dalam video ini kita melihat penerapan kesan "tepi kertas robek" ke bahagian bawah modul melalui gambar latar pada elemen semu. Jenis cara yang rapi untuk melakukannya sehingga elemen utama itu sendiri dapat memiliki warna latar belakang yang padat yang dapat kita padankan dan membiarkan latar belakang halaman berdarah melalui ruang negatif di SVG. Plus tidak memerlukan markup untuk melakukannya. Kami melihat kesan ini pada HTML5Hub.

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