Latar belakang - Trik CSS | CSS Almanac 2025

The backgroundharta di CSS membolehkan anda untuk mengawal latar belakang mana-mana elemen (apa cat di bawah kandungan dalam elemen itu). Ini adalah harta yang pendek, yang bermaksud bahawa ia membolehkan anda menulis apa yang akan menjadi banyak sifat CSS dalam satu. Seperti ini:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background terdiri daripada lapan sifat lain:

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

Anda boleh menggunakan gabungan sifat-sifat ini yang anda suka, dalam hampir semua pesanan (walaupun pesanan yang disyorkan dalam spesifikasi ada di atas). Terdapat gotcha walaupun: apa sahaja yang anda tidak nyatakan di backgroundharta tanah secara automatik ditetapkan ke lalai. Oleh itu, jika anda melakukan perkara seperti ini:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Latar belakang akan telus, bukannya merah. Walau bagaimanapun , penyelesaiannya mudah: hanya tentukan background-colorselepas background, atau gunakan singkatan (contohnya background: url(… ) red;)

Latar Belakang Pelbagai

CSS3 menambahkan sokongan untuk pelbagai latar belakang, yang berlapis di atas satu sama lain. Mana-mana harta yang berkaitan dengan latar belakang boleh mengambil senarai yang dipisahkan dengan koma, seperti ini:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Setiap nilai dalam daftar dipisahkan koma sesuai dengan lapisan: nilai pertama adalah lapisan atas, nilai kedua adalah lapisan kedua, dan warna latar selalu menjadi lapisan terakhir.

Resepi

Lihat Pen emBzRd oleh Timothy Miller (@tjacobdesign) di CodePen.

Sokongan Penyemak Imbas

Sokongan berbeza-beza di antara sifat khusus yang berbeza, dan setiap artikel yang sesuai di Almanac mempunyai nota sokongan penyemak imbas yang unik. Latar belakang warna tunggal dan gambar tunggal berfungsi di mana-mana sekalipun, dan apa sahaja yang tidak disokong kembali kepada perkara terbaik seterusnya, sama ada itu gambar atau warna.