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
latar belakang-ulang
latar-lampiran
latar-latar-kedudukan
Warna Latar Belakang
Atribut warna latar belakang mentakrifkan warna latar belakang elemen.
Warna latar belakang halaman digunakan dalam badan Dalam pemilih:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>你好！这是来自php中文网的实例。</p>
</body>
</html>Jalankan program untuk mencubanya
Dalam CSS, nilai warna biasanya dinyatakan dalam Ditakrifkan dengan cara berikut:
Hex - seperti: "#ff0000"
RGB - seperti: "rgb(255,0, 0)"
Nama warna- Contohnya: "merah"
Dalam contoh berikut, elemen h1, p dan div mempunyai warna latar belakang yang berbeza:
Contoh
<!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>CSS background-color 实例!</h1>
<div>
改文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div>
</body>
</html>Imej latar belakang
Atribut imej latar belakang menerangkan latar belakang- imej elemen.
Secara lalai, imej latar belakang Laksanakan paparan berulang berjubin untuk menutup keseluruhan entiti elemen.
Contoh tetapan imej latar belakang halaman:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/580837363b987802.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Imej latar belakang - Jubin secara mendatar atau menegak
Secara lalai atribut imej latar belakang akan menjubinkan halaman secara mendatar atau menegak.
Sesetengah imej kelihatan sangat tidak konsisten jika ia dijubin secara mendatar dan menegak, seperti yang ditunjukkan di bawah:
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083b0ef203a172.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>The latar belakang halaman adalah lebih baik jika imej hanya berjubin secara mendatar (ulang-x):
Contoh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083a548d12a750.jpg');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Jalankan program di atas untuk mencuba ia
Imej latar belakang - tetapkan kedudukan dan tidak berjubin
Biarkan imej latar belakang tidak menjejaskan reka letak teks
Jika anda tidak mahu ia Untuk jubin imej, anda boleh menggunakan atribut ulang latar belakang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>
</html>Jalankan atur cara dan cuba
Dalam contoh di atas, imej latar belakang dan teks dipaparkan pada kedudukan yang sama, untuk membolehkan susun atur halaman Untuk menjadi lebih munasabah dan tidak menjejaskan bacaan teks, kita boleh menukar kedudukan imej.
Anda boleh menggunakan atribut kedudukan latar belakang untuk menukar kedudukan imej di latar belakang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background-image:url('/upload/course/000/000/006/58083c0089e20545.jpg');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>Jalankan atur cara untuk mencubanya
Atribut singkatan latar belakang
Dalam contoh di atas kita dapat melihat bahawa warna latar belakang halaman dikawal oleh banyak atribut.
Untuk memudahkan kod atribut ini, kita boleh menggabungkan atribut ini dalam atribut yang sama.
Atribut singkatan warna latar belakang ialah "latar belakang":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
body
{
background:#ffffff url('/upload/course/000/000/006/58083c0089e20545.jpg') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>终于为那一身江南烟雨覆了天下，容华谢后，不过一场，山河永寂。</p>
<p>千秋功名，一世葬你，玲珑社稷，可笑却无君王命</p>
</body>
</body>
</html>Jalankan program Cuba
Apabila menggunakan atribut singkatan, susunan nilai atribut ialah: :
warna latar belakang
latar belakang- imej
latar belakang-ulang
latar belakang-lampiran
latar belakang- position
Anda tidak perlu menggunakan semua atribut di atas, anda boleh menggunakannya mengikut keperluan sebenar halaman.
Atribut latar belakang CSS
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
