masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

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.

Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492963 permainan