logo

CSS'ye arka plan resmi nasıl eklenir?

arka plan görüntüsü CSS'deki özellik, bir görüntüyü bir öğenin arka planı olarak ayarlamak için kullanılır. Bu CSS özelliğini kullanarak bir öğe için bir veya birden fazla arka plan resmi ayarlayabiliriz.

Varsayılan olarak görüntü, bir öğenin sol üst köşesine konumlandırılır ve hem yatay hem de dikey olarak tekrarlanır. Arka plan resmi metin rengine göre seçilmelidir. Metin ve arka plan görselinin kötü kombinasyonu, kötü tasarlanmış ve okunamayan web sayfasının nedeni olabilir.

url() Bu özelliğin değeri herhangi bir görüntüye dosya yolu eklememize olanak tanır. Öğenin arka planını gösterecektir. Arka plan için birden fazla görüntü veya degradeler ve görüntülerin bir karışımını kullanabiliriz. Arka plan görüntüsü yüklenemezse veya degradeleri kullanıyorsak ancak bunlar ilgili tarayıcıda desteklenmiyorsa, öğenin arka plan rengi olarak geri dönüş değerini (ikame olarak kullanılan değer) kullanabiliriz.

maven deposu

Sözdizimi

 background-image: url(); 

Değerler

url(): Bu, resmin URL'sidir. Birden fazla görsel belirtmek istiyorsak URL'leri virgülle ayırabiliriz.

bir ağacın ön sipariş geçişi

Örnek

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Şimdi Test Edin

Çıktı

CSS'de arka plan resmi nasıl eklenir

Örnek

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Şimdi Test Edin

Çıktı

CSS'de arka plan resmi nasıl eklenir

Örnek

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
Şimdi Test Edin

Çıktı

CSS'de arka plan resmi nasıl eklenir