Latar belakang CSS vs warna latar belakang

dan kemudian menambah tajuk dan perenggan.

HTML

< div >

< h1 > LinuxHint < / h1 >

< hlm > Selamat datang ke laman web kami < / hlm >

< / div >

Dalam CSS, kami akan melaraskan ketinggian div sebagai ' 100% ” untuk memaparkannya pada keseluruhan halaman dan saiz fon teks sebagai “ xx-besar ”. Selepas itu, tetapkan warna latar belakang sebagai “ aqua ”.

CSS

div {

ketinggian : 100% ;

Saiz huruf : xx-besar ;

warna latar belakang : aqua ;

}

Dalam imej yang disediakan di bawah, anda boleh melihat bahawa warna latar belakang digunakan:

Harta imej latar belakang CSS

' imej latar belakang sifat ” digunakan untuk menetapkan satu atau lebih imej sebagai latar belakang elemen HTML. Anda boleh menggunakan sifat ini untuk menambah imej latar belakang yang berbeza untuk elemen yang berbeza.

Sintaks

Sintaks sifat imej latar belakang ialah:

imej latar belakang: url()

Di sini, berikan laluan imej yang anda ingin tetapkan sebagai latar belakang sebagai hujah kepada “ url() ”.

Contoh

Sebagai penerusan contoh sebelumnya, tambahkan imej latar belakang dalam ' div ” kelas. Kami akan menambah url imej sebagai ' url(img.jpg) ”:

div {

...

imej latar belakang : url ( img.jpg ) ;

}

Output yang disediakan di bawah menunjukkan bahawa imej latar belakang telah berjaya ditambahkan:

Perhatikan bahawa imej diulang. Untuk menyelesaikan isu ini, lihat harta seterusnya.

CSS background-repeat Property

Apabila anda menambah imej sebagai latar belakang pada halaman web, ia akan berulang secara lalai. Untuk mengelakkan pengulangan ini dan tetapkan corak mengikut pilihan anda, ' latar belakang-ulang ” harta digunakan.

Sintaks

Sintaks sifat ulangan latar belakang ialah:

latar belakang-ulang : ulang | ulang-x | ulang-y | tidak berulang

Perihalan nilai yang dinyatakan bagi sifat berulang latar belakang diberikan di bawah:

• ulangi: Ia digunakan untuk mengulang imej dalam kedua-dua arah, menegak dan mendatar.
• ulang-x: Ia digunakan untuk menetapkan pengulangan imej hanya secara mendatar.
• ulang-y: Ia menentukan pengulangan menegak imej.
• tidak berulang: Ia digunakan untuk mengelakkan pengulangan imej.

Contoh

Di sini, kami akan menetapkan nilai sifat ulangan latar belakang sebagai ' tidak berulang ”:

div {

...

latar belakang-ulang : tidak berulang ;

}

Hasil kod yang disediakan di atas diberikan di bawah. Anda dapat melihat bahawa imej tidak diulang lagi:

Harta kedudukan latar belakang CSS

Untuk menetapkan kedudukan imej latar belakang, ' kedudukan latar belakang ” harta digunakan. Ia membolehkan anda melaraskan imej dalam kedudukan yang berbeza seperti kiri atas, kiri tengah, kiri bawah, kanan atas, kanan tengah dan banyak lagi.

Sintaks

Sintaks sifat kedudukan latar belakang ialah:

kedudukan latar belakang : nilai

Di tempat ' nilai ”, anda boleh menentukan kedudukan imej.

Contoh

Di sini, kami akan menetapkan kedudukan latar belakang sebagai ' pusat ”:

div {

...

kedudukan latar belakang : pusat ;

}

Dalam output di bawah, imej muncul di tengah halaman:

Harta bersaiz latar belakang CSS

Untuk menetapkan saiz imej latar belakang, ' saiz latar belakang ” harta digunakan.

Sintaks

Saiz latar belakang mempunyai sintaks berikut:

saiz latar belakang : panjang|kulit

Berikut ialah perihalan nilai sifat bersaiz latar belakang:

• panjang: Ia digunakan untuk menetapkan lebar dan ketinggian imej latar belakang.
• penutup: Ia digunakan untuk melaraskan imej latar belakang di seluruh latar belakang.

Contoh

Kami akan menetapkan saiz latar belakang sebagai ' 100% 'tinggi dan' 80% ” lebar:

div {

...

saiz latar belakang : 100% 80% ;

}

Anda boleh melihat bahawa imej telah diubah saiz berdasarkan dimensi yang ditentukan:

Harta asal latar belakang CSS

' latar belakang-asal ” hartanah digunakan untuk melaraskan kawasan kedudukan imej latar belakang. Imej dilaraskan di sudut kiri atas sebagai lalai.

Sintaks

Sintaks sifat asal latar belakang ialah:

latar belakang-asal : kotak padding| kotak sempadan | kotak kandungan

Nilai sifat asal latar belakang diterangkan di bawah:

• kotak padding: Ia ialah nilai lalai bagi sifat asal latar belakang yang digunakan untuk melaraskan kedudukan imej latar belakang mengikut tepi pelapik.
• kotak sempadan: Ia digunakan untuk menetapkan imej mengikut kotak sempadan imej.
• kotak kandungan: Ia digunakan untuk menetapkan imej latar belakang mengikut kandungan imej.

Catatan: Sifat latar belakang asal tidak berfungsi jika nilai sifat lampiran latar belakang ditetapkan sebagai “ tetap ”.

Contoh

Mula-mula, buat sempadan di sekeliling bekas. Di sini, kami akan meneruskan contoh sebelumnya dan menetapkan nilai padding sebagai ' 10px ”. Selepas itu, laraskan lebar sempadan sebagai “ 15px ”, gaya sebagai “ rabung ”, dan warna sebagai “ rgb(1, 68, 68) ”. Pada akhirnya, kami akan menetapkan nilai harta latar belakang asal sebagai “ kotak kandungan ”:

div {

...

padding : 10px ;

sempadan : 15px rabung rgb ( 1 , 68 , 68 ) ;

latar belakang-asal : kotak kandungan ;

}

Hasil kod yang disediakan di atas diberikan di bawah. Anda boleh melihat bahawa kedudukan imej ditetapkan mengikut kandungan div:

CSS latar belakang-klip Harta

' klip latar belakang ” sifat berfungsi pada warna latar belakang elemen. Ia membolehkan anda mengawal sejauh mana warna latar belakang menjangkau sesuatu elemen, seperti pelapik elemen, jidarnya dan kandungannya.

Sintaks

Sintaks sifat klip latar belakang ialah:

latar belakang-asal : kotak sempadan | kotak padding | kotak kandungan

Nilai sifat asal latar belakang diterangkan di bawah:

• kotak sempadan: Ia ialah nilai lalai bagi sifat asal latar belakang yang digunakan untuk menetapkan warna latar belakang di belakang sempadan.
• kotak padding: Ia digunakan untuk melaraskan warna dalam kotak padding elemen.
• kotak kandungan: Ia digunakan untuk menetapkan warna latar belakang mengikut kandungan elemen.

Contoh

Kami akan meneruskan contoh sebelumnya dan menukar nilai gaya sempadan kepada “ bertitik ” untuk memahami sifat klip latar belakang. Selepas itu, kami akan menetapkan nilai harta latar belakang klip sebagai ' kotak padding ”:

div {

...

klip latar belakang : kotak padding ;

}

Output menandakan bahawa warna latar belakang putih muncul apabila tepi sempadan berakhir:

Harta lampiran latar belakang CSS

' lampiran latar belakang sifat ” digunakan untuk melaraskan tingkah laku atau imej semasa menatal halaman. Tingkah lakunya boleh ditetapkan menatal dengan elemen lain atau tetap.

Sintaks

Sintaks sifat lampiran latar belakang ialah:

lampiran latar belakang : nilai

Anda boleh menetapkan nilai lampiran latar belakang sebagai “ tetap ' untuk membetulkan imej latar belakang atau ' tatal ” untuk membenarkan imej menatal dengan halaman.

Catatan: Secara lalai, nilai sifat lampiran latar belakang ditetapkan sebagai “ tatal ”.

Ia boleh dilihat bahawa imej latar belakang yang ditambah tidak statik apabila kita telah menatal. Sekarang mari kita selesaikan isu ini.

Untuk berbuat demikian, kami menetapkan nilai sifat lampiran latar belakang sebagai “ tetap ”:

div {

...

lampiran latar belakang : tetap ;

}

Berikut ialah hasil yang menunjukkan bahawa imej telah ditetapkan:

Sekarang, pergi ke arah perbandingan antara sifat latar belakang dan warna latar belakang.

Latar belakang CSS vs warna latar belakang

Jadual yang diberikan akan membezakan sifat latar belakang dan warna latar belakang berdasarkan cirinya:

ciri-ciri	latar belakang CSS	Warna latar belakang CSS
taip	Ia adalah harta super.	Ia adalah sub-harta harta latar belakang.
Kefungsian	Ia menetapkan semua sifat latar belakang.	Ia hanya menetapkan warna latar belakang.
Julat	Ia menyokong semua sifat latar belakang	Ia hanya menyokong sifat warna latar belakang
Tahap	Apabila anda perlu menambah berbilang nilai latar belakang, ia mudah digunakan. Anda boleh menetapkan nilai semua sifat latar belakang sekaligus.	Ia boleh digunakan apabila anda hanya perlu menambah satu warna latar belakang.
Sintaks	latar belakang: nilai (Nilai ialah warna bg, imej bg dan sifat lain)	warna latar belakang: warna

Telah dijelaskan bagaimana sifat warna latar belakang berbeza daripada sifat latar belakang.

Kesimpulan

CSS ' latar belakang sifat ” ialah sifat singkatan yang digunakan untuk menetapkan berbilang nilai latar belakang sekali gus, seperti warna, imej, kedudukan, saiz, asal dan banyak lagi. Selain itu, ' warna latar belakang ” hanya digunakan untuk menambah warna pada latar belakang. Dalam panduan ini, kami telah membincangkan perbezaan antara sifat latar belakang CSS dan sifat warna latar belakang CSS.