Apa perbedaan antara latar belakang dan warna latar belakang

Apa perbedaan antara menentukan warna latar belakang menggunakan backgrounddan background-color?

Cuplikan # 1

body { background-color: blue; }

Cuplikan # 2

body { background: blue; }

Menganggap bahwa itu adalah dua sifat yang berbeda, dalam contoh spesifik Anda tidak ada perbedaan dalam hasilnya, karena backgroundsebenarnya merupakan singkatan

background-color
background-image
background-position
background-repeat
background-attachment
background-clip
background-origin
background-size

Jadi, selain itu background-color, menggunakan backgroundpintasan Anda juga bisa menambahkan satu atau lebih nilai tanpa mengulangi background-*properti lain lebih dari sekali.

Yang mana yang harus dipilih pada dasarnya terserah Anda, tetapi itu juga bisa bergantung pada kondisi spesifik deklarasi gaya Anda (misalnya jika Anda perlu mengganti hanya background-colorketika mewarisi background-*properti terkait lainnya dari elemen induk, atau jika Anda perlu menghapus semua nilai kecuali background-color).

backgroundakan supercede semua sebelumnya background-color, background-image, dll spesifikasi. Ini pada dasarnya singkatan, tetapi reset juga.

Saya kadang-kadang akan menggunakannya untuk menimpa backgroundspesifikasi sebelumnya dalam kustomisasi template, di mana saya ingin yang berikut:

background: white url(images/image1.jpg) top left repeat;

menjadi yang berikut:

background: black;

Jadi, semua parameter ( background-image, background-position, background-repeat) akan reset ke nilai standar.

Tentang kinerja CSS :

backgroundvs background-color:

Perbandingan dari 18 carikan warna yang diberikan 100 kali pada halaman sebagai persegi panjang kecil, sekali dengan latar belakang dan sekali dengan warna latar .

Meskipun angka-angka ini berasal dari satu halaman yang dimuat ulang, dengan refresh berikutnya kali render berubah, tetapi perbedaan persen pada dasarnya sama setiap kali.

Itu penghematan hampir 42,6 ms, hampir dua kali lebih cepat , saat menggunakan latar daripada warna latar di Safari 7.0.1. Chrome 33 tampaknya hampir sama.

Ini dengan jujur ​​mengejutkan saya karena untuk waktu yang paling lama karena dua alasan:

• Saya biasanya selalu berdebat untuk kejelasan dalam properti CSS, terutama dengan latar belakang karena dapat mempengaruhi spesifisitas di jalan.
• Saya pikir ketika browser melihat background: #000;, mereka benar-benar melihat background: #000 none no-repeat top center;. Saya tidak memiliki tautan ke sumber daya di sini, tetapi saya ingat pernah membaca ini di suatu tempat.

Ref: https://github.com/mdo/css-perf#background-vs-background-color

Dengan backgroundAnda dapat mengatur semua backgroundproperti seperti:

• background-color
• background-image
  
• background-repeat
  
• background-position
  dll.

Dengan background-colorAnda bisa menentukan warna latar belakang

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

Info lebih lanjut

(Lihat Keterangan: Latar Belakang - Properti singkatan)

Salah satu perbedaannya:

Jika Anda menggunakan gambar sebagai latar belakang dengan cara ini:

background: url('Image Path') no-repeat;

maka Anda tidak dapat menimpanya dengan properti "background-color".

Tetapi jika Anda menggunakan latar belakang untuk menerapkan warna, itu sama dengan warna latar dan bisa diganti.

mis .: http://jsfiddle.net/Z57Za/11/ dan http://jsfiddle.net/Z57Za/12/

Keduanya sama. Ada beberapa latar belakang penyeleksi (yaitu background-color, background-image, background-position) dan Anda dapat mengaksesnya baik melalui sederhana backgroundpemilih atau yang lebih spesifik. Sebagai contoh:

background: blue url(/myImage.jpg) no-repeat;

atau

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

Perbedaannya adalah bahwa backgroundproperti steno menetapkan beberapa properti terkait latar belakang. Itu mengatur mereka semua, bahkan jika Anda hanya menentukan misalnya nilai warna, sejak itu properti lainnya diatur ke nilai awal mereka, misalnya background-imageke none.

Ini tidak berarti bahwa itu akan selalu mengesampingkan pengaturan lain untuk properti tersebut. Ini tergantung pada kaskade menurut aturan yang biasa disalahpahami.

Dalam praktiknya, steno cenderung lebih aman. Ini adalah tindakan pencegahan (tidak lengkap, tetapi berguna) agar tidak sengaja mendapatkan beberapa properti latar yang tidak terduga, seperti gambar latar belakang, dari style sheet lain. Selain itu, lebih pendek. Tetapi Anda harus ingat bahwa itu benar-benar berarti "mengatur semua properti latar belakang".

Tidak ada perbedaan. Keduanya akan bekerja dengan cara yang sama.

Properti latar belakang CSS digunakan untuk menentukan efek latar belakang suatu elemen.

Properti CSS digunakan untuk efek latar belakang:

• warna latar belakang
• gambar latar belakang
• background-repeat
• background-attachment
• posisi latar belakang

Properti latar belakang mencakup semua properti ini dan Anda bisa menuliskannya dalam satu baris.

Ini jawaban terbaik. Singkatan (latar belakang) untuk reset dan KERING (digabungkan dengan tangan lama).

Perbandingan dari 18 carikan warna yang diberikan 100 kali pada halaman sebagai persegi panjang kecil, sekali dengan latar belakang dan sekali dengan warna latar.

Saya menciptakan kembali eksperimen kinerja CSS dan hasilnya sangat berbeda saat ini.

background

Chrome 54 : 443 (μs / div)

Firefox 49 : 162 (μs / div)

Tepi 10 : 56 (μs / div)

background-color

Chrome 54 : 449 (μs / div)

Firefox 49 : 171 (μs / div)

Tepi 10 : 58 (μs / div)

Seperti yang Anda lihat - hampir tidak ada perbedaan.

backgroundadalah jalan pintas untuk background-colordan beberapa hal terkait latar belakang lainnya seperti di bawah ini:

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

Baca pernyataan di bawah ini dari W3C:

Latar Belakang - Properti singkatan

Untuk mempersingkat kode, dimungkinkan juga untuk menentukan semua properti latar belakang dalam satu properti tunggal. Ini disebut properti steno.

Properti singkatan untuk latar belakang adalah latar belakang:

body {
  background: white url("img_tree.png") no-repeat right top;
}

Saat menggunakan properti steno urutan nilai properti adalah:

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

Tidak masalah jika salah satu nilai properti hilang, asalkan yang lainnya ada dalam urutan ini.

Saya telah menemukan bahwa Anda tidak dapat mengatur gradien dengan warna latar belakang.

Ini bekerja:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

Ini tidak:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background adalah properti singkatan untuk yang berikut:

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

Anda dapat merinci info tentang setiap properti di sini

Pesanan properti

Di sebagian besar implementasi browser (saya pikir mungkin browser yang lebih lama dapat menyajikan masalah) urutan properti tidak masalah, kecuali untuk:

• background-origindan background-clip: ketika kedua properti ini hadir, yang pertama merujuk ke -origindan yang kedua ke -clip.

  Contoh:

  background: content-box green padding-box;

  Setara dengan:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizeharus selalu mengikuti background-positiondan properti harus dipisahkan oleh/

• jika background-positiondisusun oleh dua angka, yang pertama adalah nilai horizontal dan yang kedua adalah nilai vertikal.

Saya perhatikan ketika membuat email untuk Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

Anda dapat melakukan beberapa hal yang cukup rapi setelah Anda memahami bahwa Anda dapat bermain dengan warisan dengan ini. Namun pertama-tama mari kita memahami sesuatu dari dokumen ini di latar belakang:

Dengan CSS3, Anda dapat menerapkan berbagai latar belakang ke elemen. Ini berlapis di atas satu sama lain dengan latar belakang pertama yang Anda berikan di atas dan latar belakang terakhir yang tercantum di belakang. Hanya latar belakang terakhir yang bisa menyertakan warna latar belakang.

Jadi ketika seseorang melakukannya:

background: red;

Dia mengatur warna latar belakang menjadi merah karena merah adalah nilai terakhir yang terdaftar.

Ketika seseorang melakukannya:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

Merah adalah warna latar belakang sekali lagi TETAPI Anda akan melihat gradien.

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

Sekarang hal yang sama dengan warna latar:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

Alasan ini terjadi adalah karena ketika kita melakukan ini:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

Angka terakhir mengatur warna latar belakang.

Kemudian di sebelum kita mewarisi dari latar belakang (lalu kita mendapatkan gradien) atau warna latar belakang, lalu kita mendapatkan merah.

Satu hal yang saya perhatikan bahwa saya tidak melihat dalam dokumentasi adalah menggunakan background: url("image.png")

tangan pendek seperti di atas jika gambar tidak ditemukan mengirimkan kode 302 bukannya diabaikan seperti itu jika Anda gunakan

background-image: url("image.png") 

Ada bug terkait dengan latar belakang dan warna latar belakang

perbedaannya, saat menggunakan latar belakang, kadang-kadang saat Anda membuat halaman web di latar belakang CSS: #fff // dapat menaiki blok gambar Mask ("item teratas, teks atau gambar")) jadi lebih baik untuk selalu menggunakan latar belakang- warna untuk penggunaan yang aman, dalam desain Anda jika tersendiri