background: none vs background: transparent apa perbedaannya?


119

Apakah ada perbedaan antara kedua properti CSS ini:

background: none;
background: transparent;
  1. Apakah keduanya valid?
  2. Mana yang harus digunakan dan mengapa?

Jawaban:


111

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.


2
@herman - Tidak, mereka tidak bisa. Ini sama dengan background-color: transparent; background-image: none;. Stylesheet pengguna mungkin mengganti salah satu atau kedua nilai tersebut, tetapi akan melakukannya persis seperti jika background-color: transparent; background-image: none;telah ditulis secara eksplisit.
Quentin

Jadi, Anda mengatakan nilai properti "awal" (yang digunakan untuk properti yang tidak ditentukan) bahkan menimpa stylesheet agen pengguna? Apakah Anda punya referensi?
herman

Stylesheet agen pengguna mengimplementasikan spesifikasi, yang mendefinisikan nilai properti awal dari properti tersebut sebagai transparentdan none.
Quentin

63

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 .


thx for answer apa nilai default untuk background-image, background repeat ...? apakah mereka bergantung pada browser? Jika saya mengerti penjelasan Anda, lebih baik gunakan background: none sehingga tidak ada nilai yang disetel ke default?
web-tiki

Sudahkah Anda mencoba apa yang Anda posting ?? Apakah semua nilai tidak ditetapkan? Periksa consoledi demo ini jsfiddle.net/dnzy2/6
DaniP

saat Anda menyetel: background: none; Anda mengatakan bahwa semua properti latar belakang disetel ke tidak ada ... Bukankah cara untuk mengatakan salah
DaniP

2
+1, Ini harus menjadi jawaban yang diterima (jika benar).
Pacerier

7

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;

5
Hati-hati, IE tidak mendukung initial. lihat Dapatkah Saya Menggunakan dan MDN
chharvey
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.