Latar Belakang CSS


CSS Latar Belakang

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 belakang-lampiran

  • latar belakang-kedudukan

latar belakang Warna

atribut warna latar belakang mentakrifkan warna latar belakang elemen.

Warna latar belakang halaman digunakan dalam pemilih kandungan:

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>你好世界！这是来自 W3CSchoolphp中文网的实例。</p>

</body>
</html>

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Dalam CSS, nilai warna biasanya ditakrifkan dengan cara berikut:

  • Hex - Contohnya: "#ff0000"

  • RGB - Contohnya: "rgb (255,0,0)"

  • Nama warna - seperti: "merah"

Dalam contoh berikut, h1, p, dan elemen div mempunyai warna latar belakang yang berbeza:

Instance

<!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>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

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:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body 
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d689a8a95760.gif');
	background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Jalankan contoh»

Klik butang "Jalankan contoh" Lihat contoh dalam talian

Di bawah ialah contoh gabungan teks dan imej latar belakang yang lemah. Kebolehbacaan teks yang lemah:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
	body {background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7253c8e5996.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>

</html>

Run Instance»

Klik butang "Run Instance" untuk melihat dalam talian instance

Imej latar belakang - Jubin secara mendatar atau menegak

Secara lalai sifat imej latar belakang akan menjubinkan halaman secara mendatar atau menegak.

Sesetengah imej kelihatan 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('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>

</html>

运行结果：
php工具

Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Jika imej hanya berjubin mendatar (ulang-x), halaman Latar belakang akan menjadi lebih baik:

Instance

rreee

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

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 ulangan latar belakang:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d765c3e7c347.png');
	background-repeat:repeat-x;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

</html>

Run Instance»

Klik butang "Run Butang Instance" untuk melihat contoh dalam talian

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 di latar belakang:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>

</html>

Jalankan instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Latar Belakang - atribut trengkas

Dalam contoh di atas kita boleh melihat bahawa warna latar belakang halaman diluluskan Banyak sifat untuk dikawal.

Untuk memudahkan kod atribut ini, kita boleh menggabungkan atribut ini dalam atribut yang sama

Atribut singkatan warna latar belakang ialah "latar belakang":

<. 🎜> Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	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>

Run Instance»Klik butang "Run Instance" untuk melihat contoh dalam talian

Bila menggunakan atribut yang disingkatkan, Susunan nilai atribut ialah: :

  • warna latar belakang

  • imej latar belakang

  • latar belakang -ulang

  • latar-lampiran

  • kedudukan latar belakang

Anda tidak perlu menggunakan semua atribut di atas Anda boleh menggunakannya mengikut keperluan sebenar halaman

Contoh ini menggunakan CSS yang diperkenalkan sebelum ini

Lagi Contoh

Cara untuk menetapkan imej latar belakang tetap

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	background-image:url('https://img.php.cn/upload/article/000/000/015/5c67d7b29e0e8411.png');
	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 Instance»Klik butang "Run Instance" Lihat contoh dalam talian

Contoh ini menunjukkan cara untuk menetapkan imej latar belakang tetap. Imej tidak menatal dengan seluruh halaman.

Harta latar belakang CSS

Property描述
background简写属性，作用是将背景属性设置在一个声明中。
background-attachment背景图像是否固定或者随着页面的其余部分滚动。
background-color设置元素的背景颜色。
background-image把图像设置为背景。
background-position设置背景图像的起始位置。
background-repeat设置背景图像是否及如何重复。
←
→