CSS adalah singkatan dari Cascading Style Sheets. Ini adalah bahasa reka bentuk yang sederhana namun kuat yang mempunyai keupayaan untuk mengubah halaman web. Dengan kata mudah, ia melancarkan proses membuat laman web yang rapi dan menarik bagi pengguna dengan bantuan . Dalam artikel ini, kita akan memahami bagaimana menerapkan pelbagai gambar latar dalam CSS dalam urutan berikut:
- Imej Latar Belakang dalam CSS Properties
- Imej Latar Belakang dalam CSS
- Ulangan Latar Belakang
- Lampiran Latar Belakang
- Kedudukan Latar Belakang
- Gambar Latar dalam Saiz CSS
- Warna latar belakang
Imej Latar Belakang dalam CSS Properties
Terdapat banyak sifat yang digunakan untuk mengawal tingkah laku dan kedudukan gambar. Harta ini adalah:
- gambar latar belakang
- latar belakang-ulangan
- latar belakang-lampiran
- latar belakang-kedudukan
- ukuran latar belakang
- warna latar belakang
Kami akan membiasakan setiap sifat ini dan melihat kapan dan bagaimana menggunakannya dengan beberapa demonstrasi menarik.
Imej Latar Belakang dalam CSS
The gambar latar belakang harta seperti namanya hanya digunakan untuk menunjukkan dan mengatur gambar latar melalui elemen dalam halaman web. Imej latar belakang secara lalai diletakkan di sudut kiri atas elemen.
sintaks: background-image: url | none | linear-gradient | radial-gradient
badan {background-image: url ('apple.jpg')}latar belakang menggunakan url
Mari kita fahami parameternya:
- url: Input ke parameter ini memungkinkan kita untuk menentukan jalan file ke gambar apa pun atau URL ke gambar yang perlu ditetapkan sebagai latar belakang. Untuk menyatakan lebih dari satu gambar, Url dipisahkan dengan pembatas koma.
badan {background-image: url ('apple.jpg')} 
- tiada: Ini adalah nilai lalai harta tanah dan tidak ada gambar latar yang diberikan jika nilainya ditentukan.
badan {latar belakang: tiada}- kecerunan linear (): Gambar latar ditetapkan ke kecerunan linear. Minimum sekurang-kurangnya dua warna diperlukan untuk ditentukan untuk harta tanah ini, iaitu dari atas ke bawah.
badan {background-color: # 001 background-image: linear-gradient (white 15%, transparent 16%), linear-gradient (white 15%, transparent 16%) ukuran latar: 60px 60px latar belakang-kedudukan: 0 0, 30px 30px}- kecerunan radial (): Gambar latar ditetapkan ke kecerunan radial. Minimum sekurang-kurangnya dua warna diperlukan untuk ditentukan untuk harta tanah ini, iaitu untuk pusat ke tepi.
badan {background-color: # 001 background-image: radial-gradient (putih 15%, lutsinar 16%), radial-gradient (putih 15%, lutsinar 16%) ukuran latar: 60px 60px latar belakang-kedudukan: 0 0, 30px 30px}- mengulangi-linear-kecerunan (): Ia mengulangi kecerunan linear. Mari kita gunakan contoh yang sama seperti yang kita lihat di atas dalam kecerunan linear untuk mengulang-linear-kecerunan dan melihat perbezaannya.
badan {background-color: # 001 background-image: mengulangi-linear-kecerunan (putih 15%, lutsinar 16%), berulang-linear-kecerunan (putih 15%, lutsinar 16%) ukuran latar: 60px 60px latar belakang-kedudukan : 0 0, 30 piksel 30 piksel}- mengulangi-radial-kecerunan (): Ia mengulangi kecerunan radial. Biarkan kita meneroka contoh yang sama seperti yang kita gunakan di atas dalam kecerunan radial.
badan {background-color: # 001 background-image: berulang-radial-gradient (putih 15%, transparan 16%), berulang-radial-gradient (putih 15%, telus 16%) ukuran latar: 60px 60px latar belakang-kedudukan : 0 0, 30 piksel 30 piksel}Latar Belakang Kejatuhan
Selalu disarankan sebagai tip profesional untuk menambahkan warna latar sebagai pilihan pengganti. Ia datang untuk menyelamatkan terutama ketika gambar latar tidak dimuat atau latar belakang gradien yang kita tetapkan semasa mengembangkan tidak disokong oleh beberapa penyemak imbas lama yang dilihatnya.
Ini tidak merosakkan pengalaman pengguna dan boleh dinyatakan seperti ini:
badan {latar belakang: url (apple_lost.jpg) merah jambu}Latar Belakang Pelbagai
Kami juga mempunyai pilihan untuk menetapkan beberapa gambar latar dan diperlukan dalam kebanyakan kes seperti gambar latar dan latar belakang. Urutan gambar penting di sini, gambar yang harus berada di depan dinyatakan pertama, dan gambar yang harus berada di belakang terakhir dinyatakan seterusnya.
Berikut adalah contoh untuk pelbagai gambar latar:
badan {background-image: url ('small-heart.jpg'), url ('background.jpg')}Ulangan Latar Belakang
Properti mengulangi latar belakang digunakan bersama dengan gambar latar untuk menentukan tingkah laku mengulangi gambar. Ia menentukan sama ada dan bagaimana gambar latar akan diulang. Gambar latar belakang secara lalai diulang secara menegak dan mendatar.
Nilai yang mungkin adalah:
- ulangi- Imej diulang secara mendatar dan menegak
- tidak berulang - Gambar tidak berulang
- ulang-x - Gambar diulang secara mendatar
- ulang-y - Gambar diulang secara menegak
- ruang- Gambar diulang dengan jarak genap atau jurang antara.
- bulat - Gambar diulang untuk mengisi kawasan tanpa jurang di antara mereka.
Sintaks CSS untuk harta latar belakang adalah:
latar belakang-ulangan: ulangi | ulang-x | ulangi-y | tiada ulangi | ruang | bulat
body {background-image: url ('heart.png'), url ('background.png') latar belakang-ulangi: ulang-y, ulangi-x latar belakang-warna: #ffffff}Lampiran Latar Belakang
The latar belakang-lampiran harta tanah digunakan bersama dengan gambar latar untuk menyatakan sama ada gambar tersebut perlu digulir atau tidak semasa kandungannya ditatal. Ini menandakan bahawa gambar latar harus diperbaiki atau harus bergulir bersama dengan dokumen yang berkaitan dengan pandangan tetingkap penyemak imbas. Nilai lalai adalah untuk menatal.
Nilai yang mungkin adalah:
- tatal - Gambar bergulir bersama dengan halaman.
- tetap - Gambar tidak akan menatal bersama halaman
Sintaks CSS untuk lampiran latar belakang adalah:
latar belakang-lampiran: tatal | tetap
body {background-image: url ('heart.png'), url ('background.png') latar-ulang: ruang, bulat}Kedudukan Latar Belakang
The latar belakang-kedudukan harta benda digunakan untuk menunjukkan lokasi atau kedudukan gambar latar. Nilai yang mungkin adalah:
- bahagian atas
- betul
- bawah
- ditinggalkan
- pusat
- gabungan nilai-nilai ini (mis., kiri atas)
Sintaks CSS untuk latar belakang-kedudukan adalah:
latar belakang-kedudukan: atas | kanan | kiri | bawah | tengah
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: tatal}Gambar Latar dalam Saiz CSS
Properti ini adalah salah satu yang paling berguna kerana ia membolehkan kita mengawal ukuran gambar latar. Terdapat pelbagai kombinasi yang dapat kita gunakan dengan harta tanah ini dan memperoleh hasil yang sesuai. Nilai lalai adalah automatik.
Nilai berikut dapat digunakan dengan ukuran latar:
- kereta
- panjang-tinggi dan lebar gambar cth. 20 piksel 40 piksel.
- peratusan- tinggi dan lebar gambar sebagai elemen induk peratusan wt. 50% 50%.
- tengah- Sejajarkan gambar ke tengah
- penutup, menskalakan gambar sehingga menutup sepenuhnya oleh kawasan latar belakang.
- mengandungi, menskalakan gambar agar sesuai hingga ketinggian dan lebarnya yang sebenarnya.
Sintaks CSS untuk latar belakang-kedudukan adalah:
saiz latar belakang: nilai
body {background-image: url ('heart.png'), url ('background.png') latar belakang-ulangan: tidak berulang, ukuran latar belakang berulang: 400px 150px, penutup}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: mengandung, 400 px 150 piksel}Warna latar belakang
Ini adalah yang paling mudah dari semua sifat dalam CSS. Ia menggunakan warna pepejal pada latar belakang halaman. Nilai untuk harta tanah ini dapat ditentukan dalam warna (mis. Merah, biru, dll), nilai hex dan nilai RGB.
Sintaks CSS untuk warna latar adalah:
warna latar belakang: nilai
menggunakan kelas pengimbas di java
badan {background-image: url (small-heart.jpg) background-color: # 22a8e3}Ini menyimpulkan semua sifat yang boleh kita gunakan dengan latar belakang. Kami sentiasa boleh mencuba pelbagai kombinasi sifat seperti yang kami lihat dalam demonstrasi kami.
CSS sangat mustahak dan mesti memperoleh kemahiran untuk setiap pembangun laman web depan. Ini membantu semasa merancang dan menggayakan latar belakang dan membina laman web yang mengagumkan dan memperkaya pengalaman pengguna. Yang terbaik adalah terus bereksperimen dan memanfaatkan sepenuhnya teknologi front-end khas ini kerana dapat melakukan keajaiban dan mengubah halaman secara dinamik.
Lihat kami yang dilengkapi dengan latihan langsung yang dipimpin oleh instruktur dan pengalaman projek kehidupan sebenar. Latihan ini menjadikan anda mahir dalam kemahiran bekerja dengan teknologi web back-end dan front-end. Ia merangkumi latihan mengenai Pembangunan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada soalan untuk kami? Sila sebutkan di bahagian komen di blog 'Gambar latar dalam CSS' dan kami akan menghubungi anda.