Informasi singkat

versi CSS

Nilai-nilai

none Menonaktifkan gambar latar belakang untuk elemen tersebut.

HTML5 CSS2.1 YAITU Cr Op Sa Fx

gambar latar belakang

Model Objek

dokumen.getElementById("elementID ").style.backgroundImage Peramban

Penjelajah Internet

hingga dan termasuk versi 7.0, menerapkan latar belakang ke bagian dalam batas elemen yang memiliki kumpulan properti hasLayout. Jika elemen tidak memiliki hasLayout , properti background-image akan mengikuti batas elemen, seperti yang ditentukan dalam spesifikasi. Perbedaan tampilan akan terlihat jika batasnya dibuat putus-putus atau putus-putus, bukan padat.

Jika elemen diatur ke gulir atau otomatis , Internet Explorer 8 akan memiliki penundaan vertikal satu piksel saat latar belakang bergulir. Versi Internet Explorer hingga dan termasuk 7.0 tidak mendukung nilai warisan.

none Menonaktifkan gambar latar belakang untuk elemen tersebut.

), lalu Chrome, Safari, iOS menampilkannya tidak sesuai spesifikasi, yaitu untuk setiap sel secara terpisah. Sedangkan browser harus menampilkan latar belakang yang solid untuk keseluruhan baris. Contoh 2 menunjukkan kode yang menunjukkan kesalahan. Latar Belakang TR Hasil contoh ini V peramban Chrome ditunjukkan pada Gambar. 1.

Peramban Internet

Explorer, Opera dan Firefox menampilkan latar belakang baris dengan benar (Gbr. 2).

Beras. 1. Ulangi latar belakang untuk setiap sel Beras. 2. Latar belakang untuk keseluruhan baris Dari penulis: Dalam tutorial ini kita akan melihat

teknik sederhana

membuat gambar latar belakang yang akan membentang sepenuhnya di seluruh lebar area pandang browser. Untuk melakukan ini, kita memerlukan properti CSS ukuran latar belakang; Tidak diperlukan JavaScript.

Contoh gambar background integer responsif

Prinsip dasar

Inilah rencana aksi kami.

Gunakan properti background-size untuk memenuhi viewport sepenuhnya

Properti CSS ukuran latar belakang disetel ke cover. Nilai cover memberitahu browser untuk secara otomatis dan proporsional menskalakan lebar dan tinggi gambar latar belakang sehingga selalu sama dengan atau lebih besar dari lebar/tinggi area pandang.

Gunakan kueri media untuk memproses gambar latar belakang kecil perangkat seluler

Untuk meningkatkan kecepatan memuat halaman di layar kecil, kami akan menggunakan kueri media untuk memproses versi gambar latar belakang yang lebih kecil. Ini opsional. Teknik ini akan berhasil tanpanya. Namun mengapa menggunakan gambar latar belakang kecil untuk perangkat seluler merupakan ide yang bagus?

Gambar yang saya gunakan dalam demo memiliki resolusi 5500x3600px. Resolusi ini cukup untuk sebagian besar layar lebar monitor komputer, saat ini tersedia untuk dijual. Namun untuk ini Anda harus memproses file berukuran 1,7 MB.

Beban kerja ekstra yang sangat besar hanya demi memposting foto latar belakang tidak akan ada gunanya. Dan tentunya hal ini akan berdampak sangat buruk pada koneksi yang digunakan internet seluler. Resolusi ini juga berlebihan untuk perangkat dengan layar kecil (kita akan melihatnya lebih detail nanti). Mari kita lihat keseluruhan prosesnya.

HTML

Yang Anda butuhkan untuk markup adalah ini:

Kami akan menetapkan gambar latar belakang ke elemen body sehingga gambar selalu memenuhi seluruh area pandang browser.

Namun, teknik ini juga bisa digunakan oleh siapa saja elemen blok(misalnya div atau formulir). Jika lebar dan tinggi elemen blok Anda berubah-ubah, maka gambar latar belakang akan selalu diskalakan untuk memenuhi seluruh wadah.

CSS

Tetapkan gaya berikut untuk elemen body:

body ( /* Jalur ke gambar */ background-image: url(images/background-photo.jpg); /* Gambar background selalu dipusatkan secara vertikal dan horizontal */ background-position: center center; /* Gambar background tidak diulang * / background-repeat: no-repeat; /* Gambar latar belakang tetap di viewport, sehingga tidak bergerak ketika tinggi konten lebih besar dari tinggi gambar */ background-attachment: fixed /* Hal ini yang memungkinkan gambar latar belakang menyesuaikan dengan ukuran container */ background-size: cover; /* Mengatur warna latar belakang yang akan ditampilkan saat gambar latar belakang dimuat */ background-color: #464646 )

Pasangan properti/nilai yang paling penting untuk diperhatikan adalah:

ukuran latar belakang: sampul;

Di sinilah keajaiban dimulai. Pasangan properti/nilai ini memberitahu browser untuk menskalakan gambar latar belakang secara proporsional, yaitu. sehingga lebar dan tingginya sama dengan atau lebih besar dari lebar/tinggi elemen (dalam kasus kita, elemen body).

Namun, ada satu masalah dengan pasangan properti/nilai ini: jika gambar latar belakang ukuran yang lebih kecil elemen tubuh - apa yang akan terjadi di layar dengan resolusi tinggi dan/atau saat Anda jumlah yang sangat besar konten pada halaman - browser pasti akan memperbesar gambar. Dan seperti yang kita ketahui, saat kita memperbesar ukurannya bitmap, kualitas gambar menurun (dengan kata lain terjadi pikselasi).

Meningkatkan ukuran gambar relatif terhadap ukuran asli mempengaruhi kualitas gambar. Ingatlah ini ketika Anda memilih gambar yang cocok. Contoh demo menggunakan foto besar ukuran 5500x3600px untuk monitor layar lebar, jadi itu akan memakan banyak waktu layar besar sehingga terjadi distorsi kualitas. Mari kita lanjutkan. Untuk memastikan bahwa gambar latar belakang selalu berada di tengah viewport, kita akan menulis:

posisi latar belakang: tengah tengah;

Entri ini menempatkan latar belakang pada sumbu koordinat di tengah area pandang. Selanjutnya kita perlu mendefinisikan apa yang terjadi ketika tinggi konten melebihi tinggi viewport yang terlihat. Jika ini terjadi, bilah gulir akan muncul.

DI DALAM dalam hal ini kita perlu memastikan bahwa gambar latar belakang tetap pada posisi aslinya bahkan ketika pengguna menggulir halaman ke bawah. Dalam situasi ini, gambar akan berakhir begitu saja saat digulir, atau akan bergerak seiring berjalannya pengguliran (yang bisa sangat mengganggu pengguna). Untuk memperbaiki latar belakang, kami mengatur properti background-attachment ke fixed.

lampiran latar belakang: diperbaiki;

Dalam demo, saya menambahkan opsi "muat konten" sehingga Anda dapat melihat apa yang terjadi ketika bilah gulir muncul di browser ketika properti lampiran latar belakang disetel ke tetap. Anda juga dapat mengunduh demo dan bermain-main dengan nilai properti pemosisian (seperti lampiran latar belakang dan posisi latar belakang) untuk melihat pengaruhnya terhadap pengguliran halaman dan gambar latar belakang. Nilai properti lainnya cukup jelas.

Singkatan CSS

Saya telah merinci properti latar belakang agar lebih mudah dijelaskan. Bentuk singkatannya juga akan setara:

badan ( latar belakang: url(background-photo.jpg) penutup tengah tengah tidak ada pengulangan yang diperbaiki; )

Yang perlu Anda lakukan hanyalah mengubah nilai url agar mengarah ke gambar latar belakang Anda.

Opsional: Kueri media untuk layar kecil

Untuk layar kecil yang saya gunakan program Photoshop, untuk memperkecil gambar latar belakang asli secara proporsional menjadi 768x505px, dan saya juga menggunakan Smush.it untuk memperkecil ukurannya sedikit lagi. Berkat ini, ukuran file berkurang dari 1741KB menjadi 114KB. Itu. ukuran gambar berkurang 93%.

Tolong jangan salah paham, 114KB masih cukup banyak untuk elemen desain estetika murni. Mengingat beban tambahan sebesar 114KB, saya hanya akan menggunakan file seperti itu jika saya melihat peluang untuk meningkatkan pengalaman pengguna (UX) situs secara signifikan, karena... V saat ini sebagian besar lalu lintas Internet berasal dari perangkat seluler background-image: url (images/background-photo-mobile-devices.jpg);

Kueri media memiliki batas lebar max-width: 767px, yang berarti jika area pandang browser lebih besar dari 767px, gambar latar belakang berukuran besar akan dimuat.

Kelemahan menggunakan media query ini adalah jika Anda mengubah lebar jendela browser Anda, misalnya dari 1200px menjadi 640px (atau sebaliknya), Anda akan langsung melihat saat gambar latar kecil atau besar dimuat.

Selain itu, karena beberapa perangkat layar kecil mungkin menampilkannya lagi piksel – misalnya, iPhone 5 c tampilan retina mampu menampilkan resolusi 1136x640px - gambar latar kecil akan menjadi piksel.

Singkatnya

Anda dapat melihat lebih banyak versi saat ini kode sumber dari tutorial ini di GitHub. Saya hanya dapat memperingatkan Anda tentang satu hal: harap gunakan teknik ini dengan hati-hati karena file besar dapat merusak UX secara serius, terutama jika pengguna akhir menggunakan koneksi Internet yang lambat dan tidak dapat diandalkan. Ini adalah alasan lain mengapa Anda harus memilih warna latar belakang yang sesuai sehingga pengguna dapat membaca konten saat gambar latar belakang sedang dimuat.

Hari ini kita akan mengerjakan gambar latar belakang, yang diatur menggunakan properti latar belakang dan propertinya arti tambahan. Mari kita pertimbangkan beberapa contoh praktis dalam pelaksanaannya menetapkan beberapa latar belakang pada elemen yang sama.

Ini dapat berguna dalam banyak kasus dan momen. Terutama penggunaan elemen semu dalam hal ini, karena parameternya sangat fleksibel.

Banyak gambar latar belakang

Agar tidak membuat blok di dalam blok, cara termudah adalah menambahkan satu baris aturan ke elemen utama dan mendapatkan hasil yang diinginkan. Kita dapat menganggap ini sebagai pilihan singkat, terutama karena hal ini menghilangkan kebutuhan untuk membahasnya sekali lagi kode sumber. Semuanya akan dilakukan hanya dengan menggunakan CSS.

Blockimg( background: url("img/img2.png"),/*latar belakang paling atas lalu secara berurutan*/ url("img/img3.png"), url("img/img1.jpg"); background-position : 370px tengah, 120px 150px, tengah tengah;/*posisi gambar*/ background-repeat: no-repeat;/*repeat picture*/ background-color: #444;/*jika warna latar diperlukan*/ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); margin: 100px otomatis 15px; lebar kotak:700px; tinggi minimum: 300px; 370px tengah, url("img/img3.png") tanpa pengulangan 120px 150px, url("img/img1.jpg") tanpa pengulangan tengah ; margin: 100px otomatis 15px; :700 piksel;

Penjelasan. Kami memberi elemen gambar latar belakang, yang menunjukkan jalur ke lokasinya. Dipisahkan dengan koma, kita diberi kesempatan untuk memasukkan lebih banyak lagi background, seperti terlihat pada kode di atas. Urutan nomornya menentukan gambar mana yang akan berada di atas gambar lainnya. Artinya, latar belakang pertama lebih tinggi dari yang lainnya, dan kemudian urutannya mengikuti prinsip editor grafis biasa.

Berikutnya ditunjukkan opsi tambahan melalui properti individu: posisi, pengulangan, ukuran, jika perlu, kemudian warna. Perlu diketahui juga bahwa semua parameter ditulis dipisahkan dengan koma, sesuai urutan nomor gambar.

Dan satu detail terakhir. Seluruh kode dapat dipersingkat hanya dengan menggunakan satu properti umum, background . Ada opsi kedua dalam contoh kode yang menunjukkan bagaimana hal ini dilakukan.

Gambar latar belakang melalui elemen semu

Juga jangan lupakan pilihan alternatif dengan demikian adalah elemen semu sebelum dan sesudah. Ada keuntungan positif dalam penggunaannya - gambar dapat dipindahkan melampaui tepi elemen sehingga tidak hilang di tepinya, tetapi berada di atasnya. Teknik ini akan berguna jika Anda perlu membuat sesuatu seperti efek 3D.

Blockimg( latar belakang: url("img/img1.jpg") tanpa pengulangan;/*elemen latar belakang*/ posisi:relatif;/*area posisi*/ margin: 200px otomatis 15px; ukuran kotak: kotak batas; padding: 25 piksel; lebar: 700 piksel; tinggi minimum: 300 piksel; ) .blockimg::before( latar belakang: url("img/img1.png") tengah tanpa pengulangan; bawah: 0; konten: ""; tinggi: 295 piksel; kiri: 0; posisi: absolut;/*posisi absolut*/ kanan: 0; atas: -150px )

Penjelasan. Faktanya, semuanya sangat sederhana. Elemen utama dengan cara biasa mengatur latar belakang. Berikutnya adalah properti kunci position: relative; , yang mendefinisikan area untuk memindahkan elemen lain yang ada di elemen utama dan memiliki properti position:absolute; .

Alih-alih elemen lain, meskipun secara formal merupakan area terpisah, kami menggunakan elemen semu. Kami memberikannya posisi absolut dan memposisikannya pada tempat yang kami perlukan.

Halo, para pembaca situs blog yang budiman. Hari ini kita akan melihat lima aturan CSS yang memungkinkan Anda menyetel latar belakang untuk elemen apa pun di Html - posisi latar belakang (gambar, ulangi, warna, lampiran). Nah, jangan lupa juga untuk menyebutkan aturan gabungan Latar Belakang.

Tidak ada yang rumit dalam hal ini, tetapi ada kehalusan dan nuansa tertentu yang perlu Anda ketahui dan sudah templat yang sudah jadi(ingat tentang, yang akan membantu mengungkap semua seluk beluk desain apa pun).

Izinkan saya mengingatkan Anda sekali lagi bahwa artikel ini adalah bagian dari sebuah seri dan sebaiknya mulai mempelajari style markup dari awal, yaitu dengan artikel tentang apa itu CSS dan kegunaannya, lalu ikuti urutan yang diberikan. dalam buku referensi. Meskipun, bagaimanapun, itu terserah Anda, tapi sekarang mari kita bicara tentang pengaturan latar belakang.

Warna, warna latar dan gambar latar

Pertama mari kita lihat bagaimana warna diatur elemen HTML dengan menggunakan Aturan warna css. Faktanya, semuanya sederhana di sini. Sintaksnya sepenuhnya normal dan Anda dapat mengatur warna sesuai dengan cara yang dilakukan dalam bahasa tersebut markup hiperteks. Seperti yang Anda ingat, ditempatkan setelah tanda pagar (hash - “#fe35a3”), atau menggunakan tiga digit, jika yang pertama bertepatan dengan nilai yang kedua, yang ketiga dengan yang keempat, dan yang kelima, masing-masing, dengan yang keenam ( kode warna “#aa33ff” dapat ditulis secara singkat sebagai "a3f").

Juga warna dalam Html dan kode css dapat direpresentasikan sebagai kata-kata (misalnya, “merah”), tetapi yang paling sering digunakan adalah kode heksadesimal:

Warna:#303

Sebagai contoh, saya mewarnai paragraf kecil ini dengan warna yang sama seperti di atas (#303). Sekarang sedikit berbeda dari warna paragraf lainnya (lebih gelap), yang disetel ke #555 in berkas CSS digunakan oleh saya Tema WordPress. Namun mengatur warna menggunakan warna cukup sederhana, namun dengan background akan sedikit lebih rumit.

Jadi, untuk latar belakang di Css Ada lima aturan yang bisa digabungkan menjadi satu jika diinginkan. Untuk melihatnya, Anda dapat membuka halaman spesifikasi W3C saat ini dan mencari apa pun yang memiliki kata Latar Belakang:

1. warna latar belakang - menggunakan aturan ini, Anda mengatur warna latar belakang untuk elemen HTML apa pun. Anda dapat menggunakan kode atau nama bayangan, mis. semuanya sama persis seperti saat menggunakan warna.

gambar latar belakang - dengan itu Anda dapat menggunakan gambar sebagai latar belakang (tetapi pastikan untuk membacanya, karena gambar yang berat akan memperlambat pemuatan halaman), jalur yang akan ditunjukkan dalam fungsi url ().

Jika Anda melihat spesifikasinya, Anda akan melihatnya warna latar belakang default elemen apa pun akan transparan (nilai default aturannya adalah “warna latar: transparan”). Benar, dalam elemen itu tidak akan transparan secara default, karena Ini adalah elemen sistem dan segala sesuatu di dalamnya berbeda dan berbeda dari tag bahasa markup hypertext biasa.

Warna dalam warna latar ditetapkan sebagai standar (enam atau tiga digit kode heksadesimal, atau satu kata):

Warna latar:#FEFCDE

Misalnya, latar belakang paragraf ini ditentukan menggunakan warna latar belakang dengan kode warna yang diberikan tepat di atas.

Keempat aturan CSS lainnya hanya akan berpengaruh gambar latar belakang, yang dapat disetel untuk elemen Html apa pun dan, jika diinginkan, diposisikan secara tepat. File grafik mana yang akan digunakan dapat ditentukan menggunakan gambar latar belakang.

Jika Anda melihat spesifikasi bahasa markup, Anda akan melihat bahwa gambar latar defaultnya adalah "tidak ada" (yaitu, tidak ada gambar yang digunakan sebagai latar belakang). Nah, jika Anda masih memerlukannya, maka dalam fungsi url() Anda perlu menunjukkan jalur ke sana:

Gambar latar belakang:url(https://site/image/comment_top_focus.gif);

Misalnya, untuk paragraf ini saya menggunakan file grafik dengan latar belakang, jalurnya dijelaskan tepat di atas. Anda melihat bahwa seluruh area yang dialokasikan untuk paragraf ini ditutupi dengan gambar berulang, yang aslinya terlihat seperti ini:

Itu. ketika hanya menggunakan satu aturan gambar latar belakang yang menentukan jalurnya file grafik, gambar yang sama ini akan dikalikan secara vertikal dan horizontal hingga menutupi seluruh area yang dialokasikan pada halaman web untuk elemen Html spesifik ini (dalam contoh kita, ini adalah paragraf). Mengapa ini terjadi?

Background-repeat - mengulang gambar latar belakang

Ya, karena kami tidak menentukan nilai apa pun untuk aturan CSS ulangi latar belakang, yang berarti nilai default akan digunakan untuk itu. Melihat spesifikasinya, kami menemukan bahwa nilai ini sesuai dengan “repeat” (mengulang gambar pada semua sumbu). Jawabannya datang secara alami.

Oleh karena itu, dengan pengulangan latar belakang kita bisa mengelola pengulangan gambar latar belakang. Aturan ini hanya memiliki empat arti:




Posisi latar belakang - posisi latar belakang

Sekarang timbul pertanyaan, apakah gambar background bisa digeser ke kiri? sudut atas area yang membatasi ukuran elemen. Tentu saja bisa, dan ada aturan tersendiri untuk tujuan ini. posisi latar belakang:



Melihat spesifikasi CSS, menjadi jelas mengapa gambar latar belakang secara default ditekan tepat di tepi kiri atas area elemen Html. Karena nilai "0% 0%" adalah nilai default untuk aturan posisi latar belakang.

Nah, ketika aturan ini tidak secara eksplisit ditetapkan untuk suatu elemen (seperti dalam kasus kami), browser memilih nilainya, yang diterima dalam spesifikasi secara default (perhatikan bahwa sumbu koordinat dalam CSS dilaporkan persis dari tepi kiri atas dari elemen luas).

Dari spesifikasinya juga jelas bahwa untuk memposisikan gambar latar belakang menggunakan posisi latar belakang, Anda dapat menggunakan nilai relatif (persentase) dan nilai absolut (misalnya, ). Nah, Anda juga bisa menggunakan kata-kata yang sesuai dengan nilai digital tertentu. Tapi hal pertama yang pertama.

Saat mengatur posisi gambar latar belakang menggunakan satuan absolut di posisi latar belakang prinsip berikut digunakan untuk menentukan posisi akhirnya:

Itu. browser akan menghitung offset yang ditentukan sepanjang sumbu X dan Y dari asal area di mana objek diposisikan hingga asal gambar itu sendiri. Misalnya pada paragraf ini saya memposisikan gambar background melalui posisi background menggunakan aturan CSS berikut:

Gambar latar belakang:url(https://site/image/logo.png); latar belakang-ulangi:tidak berulang; posisi latar belakang:400px 25px;

Harap dicatat bahwa dalam hal ini akan disejajarkan dengan bagian tengah area tampilan, dan bukan dengan bagian tengah area yang dialokasikan untuk paragraf ini. Jelas bahwa pada kenyataannya penempatan gambar latar belakang seperti itu tidak mungkin digunakan.

Namun, jika Anda menetapkan posisi latar belakang tetap untuk elemen seperti Body atau Html (yaitu dalam tag yang menutupi seluruh halaman web), maka gambar ini akan selalu terlihat di area tampilan dan inilah cara penggunaannya properti CSS lampiran latar belakang dalam tata letak blok modern.

ada lagi Latar Belakang aturan prefabrikasi, yang memungkinkan Anda menggabungkan kelima aturan yang dijelaskan di atas dalam satu botol. Selain itu, nilai untuk kelimanya dalam versi gabungan dapat digunakan dalam urutan apa pun dan dalam jumlah berapa pun (nilainya unik dan browser tidak akan membingungkannya satu sama lain). Apa pun yang tidak Anda tentukan secara eksplisit akan dianggap sebagai nilai default oleh browser.

png) tidak ada pengulangan 50%;

Contoh aturan cetakan diterapkan pada paragraf ini untuk kejelasan. Ternyata tidak bagus, tapi itu bukan yang utama. Paragraf ini menggunakan isian latar belakang yang aneh kuning, dan juga menggunakan gambar logo Liveinternet yang disejajarkan di tengah paragraf. Karena Jika aturan lampiran latar belakang tidak diberi nilai apa pun, maka nilai gulir (default) yang digunakan.

Jika untuk beberapa elemen Anda hanya ingin mengatur isian warna dan tidak mengganggu gambar latar belakang, maka Anda dapat melakukan ini:

Warna latar:#FEFCDE

menulis:

Latar Belakang:#FEFCDE

Karena semua nilai aturan prefab lainnya akan diambil secara default, dan itulah yang Anda butuhkan.

Semoga beruntung untukmu! Ke sampai berjumpa lagi di halaman situs blog

Anda dapat menonton lebih banyak video dengan mengunjungi

");">


Anda mungkin tertarik

Gaya daftar (jenis, gambar, posisi) - Aturan Css untuk penyesuaian penampilan daftar di kode HTML Cara mengonfigurasi warna latar belakang bergantian dari baris tabel, daftar, dan elemen Html lainnya di situs menggunakan kelas semu anak ke-n
Posisi (mutlak, relatif dan tetap) - metode Penempatan HTML elemen dalam CSS (aturan kiri, kanan, atas dan bawah)
Float dan hapus di CSS - alat tata letak blok
Pemosisian dengan indeks Z dan CSS Aturan kursor untuk mengubah kursor mouse

Selamat siang, pembaca tetap blog pelatihan saya dan tamu situs. Publikasi hari ini didedikasikan untuk elemen penting, yang tanpanya layanan web Anda akan terlihat kering, membosankan, dan bahkan mungkin mengasingkan pengguna. Saya akan memberi tahu Anda cara mengelola objek seperti gambar latar belakang di css.

Setelah membaca artikel ini Anda akan dapat mengoperasikannya dengan mudah berbagai parameter memformat tampilan gambar latar belakang, mempelajari cara membuat beberapa latar belakang, mengambil dan memusatkan gambar. Saya tidak akan membuat Anda bosan dengan penjelasan yang panjang, jadi mari kita mulai!

Latar belakang Yang Mulia

Untuk meregangkan, memformat, dan memodifikasi gambar latar belakang dengan segala cara yang mungkin, Anda hanya perlu mengetahui satu properti universal - latar belakang. Dengan bantuannya, Anda dapat menentukan beberapa karakteristik gambar sekaligus: menentukan warna dan/atau ukuran, mengatur ukuran, metode pemosisian, pengguliran, pengulangan, dll.

Semua ini dapat ditentukan baik dalam properti yang disebutkan di atas maupun secara spesifik elemen css. Di bawah ini sudah saya uraikan elemen individu, mengedit latar belakang, dan menyusunnya menjadi tabel.

Beberapa gambar latar belakang

Saya tahu banyak yang tidak sabar untuk melihatnya implementasi perangkat lunak materi teori, tapi tunggu sebentar lagi. Untuk memulainya, saya ingin berbicara tentang teknologi ini, dan kemudian saya akan memberikan contoh menggunakan sebagian besar properti yang dijelaskan.

Jadi, apa itu banyak latar belakang? Ini adalah peluang bagus untuk menampilkan beberapa gambar sebagai latar belakang di satu jendela sekaligus. Teknik ini mungkin berguna:

• Sebab, karena gambar kecil dimuat lebih cepat daripada dokumen grafis berat;
• Untuk menentukan lapisan yang berbeda untuk ;
• Untuk membuat latar belakang kompleks yang dirangkai bagian yang berbeda dll.

Dengan munculnya css3, penerapan teknologi tersebut menjadi jauh lebih sederhana, sejak di latar belakang-gambar Anda dapat mendaftarkan beberapa jalur ke gambar sekaligus.

Sekarang saat terbaik dari bagian praktis telah tiba. Setelah menjalankan contoh terlampir di bawah ini, layar akan menampilkan pesawat terbang melintasi langit. Izinkan saya menekankan bahwa pesawat adalah gambar dengan latar belakang transparan, dan langit adalah gambar latar belakang.

Implementasi tugas berikut akan terlihat serupa: