CSS arka plan resmi - Doğru kullanım nedir?

CSS arka plan resmi özelliğinin doğru kullanımı nedir? Anlamaya çalıştığım anahtar şeyler

1. Tırnak işaretleri içinde olması gerekiyor mu yani: background-image: url('images/slides/background.jpg');
2. Göreli bir yol olabilir mi (yukarıdaki gibi) veya tam URL mi olmalı?
3. Standartlara uyumlu tarayıcılarda doğru çalıştığından emin olmak için dikkat etmem gereken diğer noktalar.

Yol dolu veya göreli olabilir (tabii ki görüntü başka bir alandan geliyorsa, dolu olmalıdır).

URI'de tırnak işareti kullanmanıza gerek yoktur; sözdizimi şunlardan biri olabilir:

background-image: url(image.jpg);

Veya

background-image: url("image.jpg");

Ancak, W3'ten :

Parantezler, boşluk karakterleri, tek tırnak işaretleri (') ve çift tırnak işaretleri (") gibi alıntılanmamış bir URI'da görünen bazı karakterlerin ters eğik çizgiden çıkması gerekir; böylece elde edilen URI değeri bir URI belirteci olur:' \ (', '\').

Bu gibi durumlarda, tırnak işareti veya çift tırnak işareti kullanmak veya karakterlerden kaçmak gerekir.

1. Hayır, alıntı yapmaya gerek yok.

2. Evet yapabilirsin. Ancak, göreli URL'lerin stil sayfanızın URL'sinden çözüldüğünü unutmayın.

3. Tırnak işaretleri kullanmasan iyi olur. Bence onları anlamayan müşteriler var.

1) Alıntılar koymak iyi bir alışkanlıktır

2) göreli yol olabilir, örneğin:

background-image: url('images/slides/background.jpg');

css'nin yüklendiği klasörde images klasörünü arayacaktır. Dolayısıyla görüntüler başka bir klasördeyse veya CSS klasör ağacının dışındaysa, kök yoluna göre mutlak yol veya göreceli (/ ile başlayarak) kullanmalısınız.

3) aşağıdaki gibi standartlara uygun tarayıcılarda tutarlı davranması için arka plan resmi için tam bir beyan kullanmalısınız:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Göreli yollar iyidir ve tırnak işaretleri gerekmez. Yardımcı olabilecek başka bir şey background, görüntünün yüklenmemesi veya herhangi bir nedenle kullanılamaması durumunda arka plan rengini belirtmek için "steno" özelliğini kullanmaktır.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Ayrıca görüntünün tekrarlanıp tekrarlanmayacağını ve hangi yönde (belirtmezseniz, varsayılan olarak yatay ve dikey olarak tekrarlanacağını) ve ayrıca görüntünün kabına göre konumunu belirtebileceğinize dikkat edin.

Resimleriniz css dosyanızın ayrı bir dizinindeyse ve göreli yolun web sitenizin kökünden başlamasını istiyorsanız:

background-image: url('/Images/bgi.png');

sadece tam olarak görüntü dizin yapısı kontrol css klasörü dışında bir css klasörü ve görüntüleri klasörü varsayalım o zaman "../ images / image.jpg" kullanmak zorunda kalacak ve benim için yaptığı gibi çalışacağından emin olun dizin yapısı.

diyelim ki kullanımı css dosyanızdaki görüntüyü kullanıyorsa, tırnak işaretleri gerekmez

{background-image: url(your image.png/jpg etc);}

Tırnak işareti kullanmanıza gerek yoktur ve istediğiniz yolu kullanabilirsiniz!

Arka plan resmi ve URI'lar için ilgili site noktası referans sayfalarına göz atın

1. Tırnak içinde olmak zorunda değildir, ancak isterseniz kullanabilirsiniz. (Bence IE5 / Mac tek tırnak desteklemiyor).
2. Hem göreli hem de mutlak mümkündür; göreli yol css dosyasının yoluna göredir.

sadece feryat gibi css dosyanıza yazın

background:url("images/logo.jpg")