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中文网(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	设置背景图像是否及如何重复。

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> body { background-image:url('https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg'); background-color:#cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

latar belakang CSS

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]