latar belakang-asal
Atribut ini baharu dalam CSS3 Walaupun sudah tentu terdapat isu keserasian penyemak imbas tertentu (terutamanya disebabkan oleh pelayar IE peringkat rendah), seiring dengan berlalunya masa, CSS3 akan menjadi arus perdana penggunaan atribut ini.
Struktur sintaks:
background-origin:border-box|padding-box|content-box
Parameter masing-masing menunjukkan sama ada imej latar belakang dipaparkan dari jidar, pelapik (nilai lalai) atau kawasan kandungan.
Atribut ini digunakan untuk menentukan kedudukan di mana imej latar belakang dalam elemen mula dilukis Sudah tentu, kedudukan permulaan lukisan adalah berkaitan dengan nilai atribut di bawah.
1.border-box:
Nilai atribut ini menyatakan bahawa imej latar belakang dilukis dari kawasan sempadan (termasuk sempadan Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box
{
background-origin:border-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="border-box"></li>
</ul>
</body>
</html><🎜). >Seperti yang anda boleh lihat daripada kod di atas Imej latar belakang dipaparkan bermula dari sempadan, termasuk kawasan sempadan.
2.padding-box: menetapkan bahawa imej latar belakang dilukis bermula dari padding, termasuk kawasan padding Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.padding-box
{
background-origin:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>Dalam kod di atas, imej latar belakang Ia dilukis bermula dari kawasan padding.
Three.content-box:Nilai atribut ini menetapkan bahawa imej latar belakang diambil dari kawasan kandungan yang dipanggil kawasan kandungan merujuk kepada contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin属性-php中文网</title>
<style type="text/css">
ul li
{
border:10px dashed green;
width:600px;
height:600px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.content-box
{
background-origin:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html>Seperti yang dapat dilihat daripada prestasi kod di atas, imej latar belakang dilukis bermula dari kawasan kandungan. Sesetengah rakan mungkin keliru dengan perkara ini Memandangkan ia ditetapkan bahawa lukisan harus bermula dari kawasan kandungan, mengapa kedua-dua kawasan padding dan sempadan mempunyai imej latar belakang yang dipaparkan di sini dua perkara: boleh melukis dan mula melukis sesuatu konsep.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
