latar belakang CSS
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中文網(wǎng)(php.cn)</title>
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>我的 CSS web 頁!</h1>
<p>你好！這是來自php中文網(wǎng)的實(shí)例。</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中文網(wǎng)(php.cn)</title>
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>CSS background-color 實(shí)例!</h1>
<div>
改文本插入在 div 元素中。
<p>該段落有自己的背景顏色。</p>
我們?nèi)匀辉谕粋€(gè) 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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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中文網(wǎng)(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>背景圖片不重復(fù)，設(shè)置 position 實(shí)例。</p>
<p>背景圖片只顯示一次，并與文本分開。</p>
<p>實(shí)例中還添加了 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中文網(wǎng)(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 | 簡寫屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。 |
| background-attachment | 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。 |
| background-color | 設(shè)置元素的背景顏色。 |
| background-image | 把圖像設(shè)置為背景。 |
| background-position | 設(shè)置背景圖像的起始位置。 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù)。 |
