06: SVG - SVG'yi arka plan görüntüsü olarak kullanma - CSS Hileleri

SVG resimleri, background-imagetıpkı PNG, JPG.webp veya GIF gibi CSS'de olduğu gibi kullanılabilir .

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

Keskinliği korurken esneklik gibi, SVG'nin aynı mükemmelliği sürüş için ortaya çıkıyor. Ayrıca, tekrarlama gibi bir raster grafiğin yapabileceği her şeyi yapabilirsiniz.

Bu videoda, sözde bir öğede arka plan görüntüsü yoluyla bir modülün altına "yırtık kağıt kenarı" efekti uygulamaya bakıyoruz. Bunu yapmanın düzgün bir yolu, böylece ana öğenin kendisinin eşleştirebileceğimiz düz bir arka plan rengine sahip olması ve sayfa arka planının SVG'deki negatif boşluktan taşmasına izin vermesidir. Ayrıca bunu yapmak için herhangi bir işaretlemeye gerek yoktur. Bu etkiyi HTML5Hub'da gördük.

CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen GAekv'e bakın.