background: none vs background: transparent fark nedir?

Bu iki CSS özelliği arasında bir fark var mı :

background: none;
background: transparent;

1. İkisi de geçerli mi?
2. Hangisi kullanılmalı ve neden?

Aralarında hiçbir fark yok.

Yarım düzine özellikten herhangi backgroundbiri için kısaltma olan bir değer belirtmezseniz , varsayılan değerine ayarlanır. noneve transparentvarsayılanlardır.

Bir açıkça setleri background-imageiçin noneve dolaylı olarak ayarlar background-coloriçin transparent. Diğeri ise tam tersi.

@Quentin cevabına ek bilgi olarak ve haklı olarak söylediği gibi, backgroundCSS özelliğinin kendisi aşağıdakilerin kısaltmasıdır:

background-color
background-image
background-repeat
background-attachment
background-position

Yani, tüm stilleri tek bir grupta toplayabilirsiniz, örneğin:

background: red url(../img.jpg) 0 0 no-repeat fixed;

Bu (bu örnekte):

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

Öyleyse ... ayarladığınızda: background:none;
tüm arka plan özelliklerinin hiçbiri olarak ayarlanmadığını
söylüyorsunuz ... Bunu background-image: none;ve tüm diğerlerini initialduruma söylüyorsunuz (beyan edilmedikleri için).
Yani background:none;:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Şimdi, yalnızca rengi (sizin durumunuzda transparent) tanımladığınızda temelde şunu söylüyorsunuz:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

Tekrar ediyorum, @Quentin haklı olarak bu durumdadefault transparent ve nonedeğerlerin aynı olduğunu söylediği için , örneğinizde ve orijinal sorunuz için Hayır, aralarında bir fark yok.

Ama! .. Eğer background:noneVs derseniz background:redevet ... büyük bir fark var, dediğim gibi, birincisi tüm özellikleri ayarlayacak none/defaultve ikincisi sadece değişecek colorve gerisi onun defaultdurumunda kalacak .

Yani kısaca:

Kısa cevap : Hayır, hiçbir fark yok (örneğinizde ve asıl sorunuzda)
Uzun cevap : Evet, büyük bir fark var, ancak doğrudan özniteliğe verilen özelliklere bağlıdır.

Upd1: Başlangıç ​​değeri (aka default)

İlk değer, uzun el özelliklerinin başlangıç ​​değerlerinin birleştirilmesidir:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

Burada daha fazla backgroundaçıklama görün

Upd2: background:none;Spesifikasyonu daha iyi netleştirin .

Diğer yanıtları tamamlamak için: başlangıçtaki değere tüm arka plan özelliklerini (ki içerir sıfırlamak istiyorsanız background-color: transparentve background-image: noneaçıkça gibi herhangi bir değer belirtmeden) transparentveya none, yazılı bunu yapabilirsiniz:

background: initial;