background: none vs background: transparent apa perbedaannya?

Apakah ada perbedaan antara kedua properti CSS ini:

background: none;
background: transparent;

1. Apakah keduanya valid?
2. Mana yang harus digunakan dan mengapa?

Tidak ada perbedaan di antara keduanya.

Jika Anda tidak menentukan nilai untuk salah satu dari setengah lusin properti yang backgroundmerupakan singkatan, maka nilai tersebut disetel ke nilai defaultnya. nonedan transparentmerupakan default.

Satu secara eksplisit menyetel background-imageke nonedan secara implisit menyetel background-colorke transparent. Yang lainnya adalah sebaliknya.

Sebagai informasi tambahan pada jawaban @Quentin , dan seperti yang dia katakan dengan benar, backgroundproperti CSS itu sendiri, adalah singkatan dari:

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

Artinya, Anda dapat mengelompokkan semua gaya menjadi satu, seperti:

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

Ini akan menjadi (dalam contoh ini):

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

Jadi ... saat Anda menyetel: background:none;
Anda mengatakan bahwa semua properti latar belakang disetel ke tidak ada ...
Anda mengatakan itu background-image: none;dan yang lainnya ke initialstatus (karena tidak dideklarasikan).
Jadi, background:none;apakah:

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

Sekarang, ketika Anda hanya menentukan warna (dalam kasus Anda transparent) maka pada dasarnya Anda mengatakan:

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

Saya ulangi, sebagai @Quentin benar mengatakan yang default transparentdan nonenilai-nilai dalam hal ini adalah sama, sehingga dalam contoh Anda dan untuk pertanyaan asli Anda, Tidak, tidak ada perbedaan di antara mereka.

Tapi! .. jika Anda mengatakan background:noneVs background:redmaka ya ... ada perbedaan besar, seperti yang saya katakan, yang pertama akan mengatur semua properti ke none/defaultdan yang kedua, hanya akan mengubah colordan tetap sisanya dalam defaultstatusnya.

Singkatnya:

Jawaban singkat : Tidak, tidak ada perbedaan sama sekali (dalam contoh dan pertanyaan asli Anda)
Jawaban panjang : Ya, ada perbedaan besar, tetapi bergantung langsung pada properti yang diberikan untuk atribut.

Upd1: Nilai awal (alias default)

Nilai awal penggabungan nilai awal properti longhandnya:

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

Lihat backgrounddeskripsi lebih lanjut di sini

Upd2: Memperjelas background:none;spesifikasi dengan lebih baik .

Untuk melengkapi jawaban lain: jika Anda ingin menyetel ulang semua properti latar belakang ke nilai awalnya (yang mencakup background-color: transparentdan background-image: none) tanpa secara eksplisit menentukan nilai apa pun seperti transparentatau none, Anda dapat melakukannya dengan menulis:

background: initial;