Terdapat 5 sifat latar belakang utama dalam CSS, ia adalah:
warna latar belakang: Tentukan warna latar belakang yang diisi.
imej latar belakang: Rujuk imej sebagai latar belakang.
kedudukan latar belakang: Tentukan kedudukan imej latar belakang elemen.
background-repeat: Menentukan sama ada untuk mengulangi imej latar belakang.
lampiran latar belakang: Menentukan sama ada imej latar belakang menatal dengan halaman.
Sifat ini semuanya boleh digabungkan menjadi satu sifat yang disingkatkan: latar belakang. Satu perkara penting untuk diperhatikan ialah latar belakang menduduki semua kawasan kandungan elemen, termasuk pelapik dan jidar, tetapi tidak termasuk jidar elemen. Ia berfungsi dengan baik dalam Firefox, Safari, Opera dan IE8, tetapi dalam IE6 dan IE7, latar belakang tidak mengira sempadan.
Warna latar belakang
Harta warna latar belakang mengisi latar belakang dengan warna pepejal. Terdapat banyak cara untuk menentukan warna ini, dan kaedah berikut semuanya memberikan hasil yang sama.
warna latar belakang: biru;
warna latar belakang: rgb(0, 0, 255);
warna latar belakang: #0000ff;
Warna latar belakang juga boleh ditetapkan kepada telus, yang menjadikan elemen di bawahnya kelihatan.
Imej latar belakang
Atribut imej latar belakang membenarkan menentukan imej untuk dipaparkan di latar belakang. Boleh digunakan bersama dengan warna latar belakang, jadi jika imej tidak berulang, kawasan yang tidak diliputi oleh imej akan diisi dengan warna latar belakang. Kod ini sangat mudah, cuma ingat bahawa laluan adalah relatif kepada helaian gaya, jadi dalam kod berikut, imej dan helaian gaya berada dalam direktori yang sama.
imej latar belakang: url (imej.jpg);
Tetapi jika imej itu berada dalam subdirektori yang dipanggil imej, ia sepatutnya:
imej latar belakang: url( images/image.jpg);
<html>
<head>
<style type="text/css">
body {background-image: url(这个地方要写的就是你的图片的url地址了);}
</style>
</head>
<body>
</body>
</html>Background-repeat)
Apabila menetapkan imej latar belakang, imej akan dipaparkan secara lalai Tile secara mendatar dan menegak untuk menutup keseluruhan elemen. Ini mungkin yang anda perlukan, tetapi kadangkala anda mahu imej muncul sekali sahaja atau dijubin dalam satu arah sahaja. Berikut ialah nilai dan keputusan tetapan yang mungkin:
ulang-latar: ulangi; /* Nilai lalai, berjubin secara mendatar dan menegak*/
ulang-latar: tiada ulangan; Bukan berjubin. Gambar ditunjukkan sekali sahaja. */
background-repeat: repeat-x; /* Jubin secara mendatar (sepanjang paksi-x) */
background-repeat: repeat-y; /* Jubin secara menegak (sepanjang paksi-x) Di sepanjang paksi-y) */
background-repeat: mewarisi; /* Mewarisi atribut background-repeat bagi elemen induk */
<html>
<head>
<style type="text/css">
body
{
background-image:url(图片123.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>Atribut singkatan latar belakang
Anda boleh menggabungkan pelbagai atribut latar belakang menjadi satu baris dan bukannya menulisnya secara berasingan setiap kali. Formatnya adalah seperti berikut:
latar belakang: «warna» «imej» «kedudukan» «lampiran» «ulang»
Sebagai contoh, pernyataan berikut
warna latar belakang : telus;
imej latar belakang: url(imej.jpg);
kedudukan latar belakang: 50% 0;
lampiran latar belakang: tatal;
latar belakang-ulang: repeat-y;
boleh digabungkan menjadi satu baris:
latar belakang: url lutsinar (image.jpg) 50% 0 tatal ulang-y;
dan ada tidak perlu menyatakan setiap nilai. Jika nilai ditinggalkan, nilai lalai atribut digunakan. Contohnya, baris di atas mempunyai kesan yang sama seperti berikut:
latar belakang: url (image.jpg) 50% 0 repeat-y;
<html>
<head>
<style type="text/css">
body
{
background:#ff0000 url(图片888.jpg) no-repeat fixed center;
}
</syle>
</head>
<body>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
</body>
</html>
bahagian seterusnya