Latar Belakang CSS
Sifat latar belakang CSS digunakan untuk menentukan latar belakang elemen HTML.
Sifat CSS mentakrifkan kesan latar belakang:
warna latar belakang
imej latar belakang
ulang-latar
lampiran-latar belakang
kedudukan latar belakang
Warna latar belakang
Atribut warna latar belakang mentakrifkan warna latar belakang elemen.
Dalam CSS, nilai warna biasanya ditakrifkan dengan cara berikut:
Heksadesimal - seperti: "#ff0000"
RGB - seperti: "rgb(255,0,0)"
Nama warna - seperti: "merah"
Dalam contoh berikut, elemen h1, p dan div mempunyai warna latar belakang yang berbeza:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>静夜思</h1>
<div>
床前明月光，
<p>疑是地上霜。</p>
举头望明月，
<p>低头思故乡。</p>
</div>
</body>
</html>Imej latar belakang
Atribut imej latar belakang menerangkan imej latar belakang elemen.
Secara lalai, imej latar belakang dijubin dan diulang untuk meliputi keseluruhan entiti elemen.
Contoh tetapan imej latar belakang halaman:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://pic.58pic.com/58pic/14/94/21/80U58PICPJM_1024.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html> Imej latar belakang - jubin mendatar atau menegak
Secara lalai, atribut imej latar belakang akan menjubinkan halaman secara mendatar atau menegak.
Sesetengah imej kelihatan tidak konsisten jika ia berjubin secara mendatar dan menegak, seperti yang ditunjukkan di bawah:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
}
</style>
</head>
<body>
<h1>明天你好！！</h1>
</body>
</html>Jika imej hanya berjubin secara mendatar (ulang-x), Jika imej hanya berjubin secara mendatar ( ulang-y).
Imej latar belakang - tetapkan kedudukan atau tidak berjubin
Biarkan imej latar belakang tidak menjejaskan reka letak teks
Jika anda tidak mahu imej itu berjubin, anda boleh menggunakan atribut background-repeat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片背景测试</title>
<style>
body
{
background-image:url('http://img01.taopic.com/141002/240423-14100210124112.jpg');
background-repeat:no-repeat
}
</style>
</head>
<body>
<div>
<h1>明天你好！！</h1>
</div>
</body>
</html>Dalam contoh di atas, imej latar belakang dan teks dipaparkan pada kedudukan yang sama untuk menjadikan reka letak halaman lebih munasabah dan tidak menjejaskan bacaan teks , kita boleh menukar kedudukan imej.
Anda boleh menggunakan atribut kedudukan latar belakang untuk menukar kedudukan imej dalam latar belakang
kedudukan latar belakang: atas kanan;
Latar belakang - atribut trengkas
di atas Dalam contoh, kita dapat melihat bahawa warna latar belakang halaman dikawal oleh banyak atribut.
Untuk memudahkan kod sifat ini, kita boleh menggabungkan sifat ini dalam sifat yang sama
Sifat singkatan warna latar belakang ialah "latar belakang":
Apabila. menggunakan singkatan Atribut, susunan nilai atribut ialah: :
warna latar belakang
imej latar belakang
ulang-latar
latar belakang- lampiran
kedudukan latar belakang
Anda tidak perlu menggunakan semua atribut di atas, anda boleh menggunakannya mengikut keperluan sebenar halaman.
bahagian seterusnya