gambar latar belakang:
Keterangan
Properti gambar latar(dari bahasa Inggris "gambar latar" - "gambar latar") mengatur gambar latar belakang suatu elemen.
Catatan
Saat mengatur gambar latar belakang, Anda juga harus menentukan warna latar belakang yang akan digunakan jika gambar tidak tersedia. Ketika sebuah gambar tersedia, itu ditampilkan di atas warna latar belakang. (Dengan cara ini, warna akan terlihat di bagian transparan gambar).
Syarat Penggunaan
Dimulai dengan CSS3 (dipisahkan dengan koma), Anda dapat menentukan beberapa gambar latar sekaligus. Ini akan membuat gambar latar belakang bawah terlihat melalui area transparan gambar latar belakang atas.
JavaScript
[objek] .style .backgroundImage = "[nilai]";
Dukungan peramban
Spesifikasi
Nilai
Semua nilai CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3
None Menunjukkan tidak ada gambar latar belakang. url (
background-image: url (myImage.png);
Url ("
background-image: url("myImage.png");
Mewarisi Menunjukkan bahwa elemen harus mewarisi parameter elemen induk.
Nilai awal:"Tidak ada".
Contoh penggunaan
Daftar Kode
Gambar latar belakang
Sebuah dokumen dengan beberapa gambar latar belakang.
Desain situs web dimulai dengan latar belakang.
Akan benar untuk meresepkan warna latar belakang - properti warna latar belakang, untuk jaring pengaman, jika gambar tidak dimuat. Dalam kurung url () tentukan path ke folder dengan gambar.
Secara default, gambar akan berulang seperti "ubin" hingga memenuhi seluruh layar browser, saat kami bergerak ke bawah halaman, "ubin" kami akan mengisi layar kedua dan ketiga, selama konten halaman berakhir . Jelas bahwa hasil seperti itu bukanlah puncak dari ide desain, dan kami tidak akan memiliki "kamar mandi", tetapi hanya sebuah blog, di mana keterbacaan adalah poin yang sangat penting.
Pilihan sederhana untuk menghilangkan "ubin" adalah dengan menggunakan gambar besar, setidaknya lebar 1024 px, sehingga memenuhi seluruh layar. Ini juga akan menjadi solusi yang baik untuk menemukan tekstur yang mulus, ketika dikalikan, gambar akan menjadi satu kesatuan.
Bagaimana cara membuat latar belakang lebih menarik?
Terima kasih Tuhan kami memiliki pembantu untuk ini:
- jangan ulangi- nonaktifkan pengulangan
- ulangi-x- pengulangan pola hanya secara horizontal
- ulangi-y- pengulangan pola hanya secara vertikal
Sebagai contoh:
Judul blog
Ini adalah tekstur latar belakang yang hanya berulang secara horizontal.
Penolong berikutnya adalah properti latar belakang-posisi, memungkinkan Anda memposisikan gambar latar di mana saja di layar. Teknik ini tersebar luas dalam desain web modern. Kami memiliki gambar, tetapi itu bukan bagian dari konten, tetapi hanya berfungsi sebagai hiasan untuk situs.
Menuju
Contoh latar belakang yang tidak berulang dengan pemosisian tertentu.
Gambar hanya ditampilkan sekali dan terletak di sebelah kanan.
Indentasi dari tepi kanan diatur ke 200 px untuk menghindari tumpang tindih teks dengan latar belakang.
Jika kita ingin gambar selalu terlihat saat menggulir layar ke bawah, kita perlu menambahkan properti ke kode di atas - lampiran-latar belakang: diperbaiki;
Apa perbedaan antara gambar dan gambar latar belakang?
Perbedaannya mendasar, tag gambar dimasukkan langsung ke dalam tubuh html-halaman dan bertanggung jawab atas konten (ilustrasi, foto, avatar), membawa muatan semantik. Sangat penting bahwa gambar diindeks oleh mesin pencari dan masuk ke hasil pencarian. Properti gambar latar belakang CSS- buat situsnya unik dan indah, yaitu, desain ini, yang harus dibawa ke file eksternal CSS gaya atau gunakan di dalam elemen gaya.
Tentu saja, ini tidak berarti bahwa gambar latar belakang tidak akan bekerja jika dimasukkan ke dalam tubuh html-halaman. Tapi saya sangat menyarankan agar segala sesuatu yang berhubungan dengan desain dibawa keluar CSS... Akibatnya, kita akan mendapatkan yang bersih html-kode:
- ini akan memiliki efek positif pada pengindeksan situs, bot pencarian akan menyukai situs Anda dan mengunjunginya lebih sering.
- pengunjung Anda juga akan puas, situs akan memuat lebih cepat karena bobotnya yang rendah.
- Anda, sebagai webmaster, merasa lebih mudah bekerja dengan kode bersih.
Yah, kami telah mempertimbangkan kurang lebih semua opsi menggunakan properti gambar latar belakang CSS... Perbanyak latihan kawan! Jangan ragu untuk menyalin kode dan buat opsi Anda sendiri!
info singkat
versi CSS
Nilai
url Nilainya adalah jalur ke file grafik, yang ditentukan di dalam konstruksi url (). Dalam hal ini, jalur ke file dapat ditulis dalam tanda kutip (ganda atau tunggal), atau tanpa tanda kutip. none Membatalkan gambar latar belakang untuk elemen tersebut. mewarisi Mewarisi nilai dari induknya.HTML5 CSS2.1 IE Cr Op Sa Fx
Model Objek
document.getElementById ("elementID") .style.backgroundImage
Browser
Internet Explorer 7.0 atau yang lebih baru menerapkan latar belakang ke bagian dalam batas elemen yang memiliki properti hasLayout yang disetel. Jika sebuah elemen tidak memiliki hasLayout, properti background-image akan menghormati batas elemen seperti yang ditentukan dalam spesifikasi. Perbedaan tampilan akan terlihat jika batasnya putus-putus atau putus-putus, bukan padat.
Jika elemen diatur untuk menggulir atau otomatis, Internet Explorer 8 akan memiliki penundaan vertikal satu piksel saat latar belakang bergulir.
Internet Explorer hingga dan termasuk versi 7.0 tidak mendukung nilai pewarisan.
Jika latar belakang diatur untuk baris tabel (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Hasil dari contoh ini di browser Chrome ditunjukkan pada Gambar. 1. Browser Internet Explorer, Opera dan Firefox menampilkan latar belakang baris dengan benar (Gbr. 2).
Beras. 1. Mengulangi latar belakang untuk setiap sel
Beras. 2. Latar belakang untuk seluruh baris
info singkat
versi CSS
Nilai
url Nilainya adalah jalur ke file grafik, yang ditentukan di dalam konstruksi url (). Dalam hal ini, jalur ke file dapat ditulis dalam tanda kutip (ganda atau tunggal), atau tanpa tanda kutip. none Membatalkan gambar latar belakang untuk elemen tersebut. mewarisi Mewarisi nilai dari induknya.HTML5 CSS2.1 IE Cr Op Sa Fx
Model Objek
document.getElementById ("elementID") .style.backgroundImage
Browser
Internet Explorer 7.0 atau yang lebih baru menerapkan latar belakang ke bagian dalam batas elemen yang memiliki properti hasLayout yang disetel. Jika sebuah elemen tidak memiliki hasLayout, properti background-image akan menghormati batas elemen seperti yang ditentukan dalam spesifikasi. Perbedaan tampilan akan terlihat jika batasnya putus-putus atau putus-putus, bukan padat.
Jika elemen diatur untuk menggulir atau otomatis, Internet Explorer 8 akan memiliki penundaan vertikal satu piksel saat latar belakang bergulir.
Internet Explorer hingga dan termasuk versi 7.0 tidak mendukung nilai pewarisan.
Jika latar belakang diatur untuk baris tabel (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Hasil dari contoh ini di browser Chrome ditunjukkan pada Gambar. 1. Browser Internet Explorer, Opera dan Firefox menampilkan latar belakang baris dengan benar (Gbr. 2).
Beras. 1. Mengulangi latar belakang untuk setiap sel
Beras. 2. Latar belakang untuk seluruh baris
Saya pikir tidak ada satu situs pun yang propertinya tidak digunakan latar belakang CSS... Tampaknya, apa yang bisa lebih sederhana dari properti ini? Tapi tidak, kemampuannya jauh lebih luas dari tujuan biasa gambar atau warna sebagai latar belakang halaman. Sesuatu akan akrab, tetapi sesuatu pasti akan menjadi hal baru bagi banyak orang. Bagaimanapun, akan berguna untuk mengetahui secara menyeluruh bagaimana latar belakang bekerja.
CSS3 membawa banyak hal baru ke properti, ini adalah transparansi dan penetapan banyak gambar sebagai latar belakang, tetapi kita akan membicarakannya di bawah, dan pertama-tama mari kita lihat dasar-dasar properti. Latar Belakang.
warna latar belakang
Saya cukup yakin Anda telah melakukan tugas warna latar belakang beberapa kali. Ini dapat dilakukan dengan menggunakan beberapa jenis notasi: reguler (nama warna digunakan), notasi heksadesimal atau RGB. Setiap jenis sama, gunakan mana yang paling Anda sukai. Saya mencoba menggunakan versi terpendek, dan untuk persepsi itu lebih sederhana dan file gaya berukuran sedikit lebih kecil.
P (warna-latar belakang: merah;) p (warna-latar belakang: # f00;) p (warna-latar belakang: # ff0000;) p (warna-latar belakang: rgb (255, 0, 0;))
CSS3 memiliki dukungan untuk transparansi, sehingga Anda dapat menambahkannya ke warna kami juga, seperti ini:
P (warna latar: rgba (255, 0, 0, 0.5);)
Digit terakhir diatur ke transparansi 50%. Anda dapat mengatur nilai transparansi dari 0 (latar belakang sepenuhnya transparan) ke 1 (benar-benar buram).
gambar latar belakang
Properti ini juga sangat sering digunakan, memungkinkan Anda untuk menetapkan gambar ke latar belakang. CSS3 menambahkan kemampuan untuk menetapkan beberapa gambar ke latar belakang, masing-masing menciptakan semacam lapisan, sehingga setiap gambar berikutnya ditumpangkan pada yang sebelumnya. Mengapa ini bisa berguna? Semuanya cukup sederhana - katakanlah Anda perlu memasang kenop kecil di setiap sudut situs. Memberikan tata letak yang lebih atau kurang lancar, menggunakan satu gambar bukanlah pilihan. Oleh karena itu, kami membuat 4 "lapisan", memindahkan setiap gambar ke sudutnya sendiri dan hanya itu, masalahnya terpecahkan
Isi (gambar-latar belakang: url ("gambar1"), url ("gambar2"), url ("gambar3"))
Jika Anda perlu menetapkan satu gambar ke latar belakang, kami hanya meninggalkan yang pertama dalam kode, saya pikir ini bisa dimengerti.
Saat menggunakan gambar apa pun sebagai latar belakang, ada dua aturan yang perlu diingat:
- atur warna latar belakang yang kontras jika pengguna tidak dapat menampilkan gambar karena alasan tertentu. Hal ini dapat mematikan tampilan gambar klise, menghemat lalu lintas.
- jangan gunakan gambar latar belakang untuk menyampaikan informasi penting apa pun. Untuk alasan yang disebutkan di atas, pengguna mungkin tidak melihatnya.
Dukungan untuk beberapa gambar latar belakang cukup luas. Semua browser, bahkan IE8, mendukung properti ini.
