CSS3 telah membuat beberapa perubahan pada latar belakang Yang paling jelas ialah menetapkan berbilang latar belakang Ia bukan sahaja menambah 4 atribut baharu, tetapi juga melaraskan dan mempertingkatkan atribut semasa.
Berbilang imej latar belakang
Dalam css3, anda boleh menggunakan berbilang imej latar belakang dalam satu elemen teg. Kod ini serupa dengan versi css2.0, tetapi imej yang dirujuk perlu dipisahkan dengan koma ",". Imej pertama ialah latar belakang yang diletakkan di bahagian atas elemen, dan imej latar belakang seterusnya dipaparkan di bawahnya secara bergilir-gilir, seperti berikut:
imej latar belakang: url(gambar atas.jpg), url(imej tengah.jpg), url(imej-bawah.jpg);
Atribut baharu: Klip Latar Belakang
(1)background-clip: border; Latar belakang mula dipaparkan di bawah sempadan sempadan
(2)background-clip: padding; bukan di bawah sempadan sempadan
(3)background-clip: content; Latar belakang mula dipaparkan di bawah kawasan kandungan, bukan di bawah sempadan atau padding.
(4)klip latar belakang: no-klip;Nilai atribut lalai, serupa dengan klip latar belakang: sempadan;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.back {
border: 10px dotted black;
padding: 35px;
background: blue;
}
.back1 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: padding-box;
}
.back2 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="back"></div>
<br>
<div class="back1"></div>
<br>
<div class="back2"></div>
<br>
</body>
</html>Atribut baharu: Asal Latar Belakang
Atribut ini perlu digunakan bersama dengan kedudukan latar belakang. Anda boleh menggunakan kedudukan latar belakang untuk mengira kedudukan dari sempadan, padding atau kawasan kandungan kotak kandungan. (Serupa dengan latar belakang-klip)
(1)latar belakang-asal: sempadan; (3) latar belakang-asal: kandungan; Mengira dari kedudukan kawasan kandungan kotak kandungan; >
Harta Saiz Latar Belakang digunakan untuk menetapkan semula imej latar belakang anda. Terdapat beberapa nilai atribut:
(1)saiz latar: mengandungi; Kecilkan imej latar belakang agar sesuai dengan elemen label (terutamanya nisbah piksel) (2)saiz latar: penutup Biarkan imej latar belakang membesar Melanjutkan kepada keseluruhan saiz elemen label (terutamanya nisbah piksel)
(4)saiz latar belakang: 50% 100%; Ia adalah untuk menskalakan saiz imej mengikut saiz elemen tag kandungan<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.sample1,.sample2,.sample3{
margin:20px;
padding:15px;
border: dashed 15px #993300;
width:450px;
height:150px;
color:#fff;
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg) no-repeat;
}
.sample1 {
-moz-background-origin:border;
background-origin:border-box;
}
.sample2 {
-moz-background-origin:padding;
background-origin:padding-box;
}
.sample3 {
-moz-background-origin:content;
background-origin:content-box;
}
</style>
</head>
<body>
<div class="sample1"></div>
<br>
<div class="sample2"></div>
<br>
<div class="sample3"></div>
<br>
</body>
</html>bahagian seterusnya
