digunakan untuk memangkas imej latar belakang yang sesuai untuk memenuhi keperluan sebenar.
Struktur tatabahasa:
klip latar belakang: kotak sempadan|kotak padding|kotak kandungan|tiada klip
Atribut ini digunakan untuk menentukan kawasan di mana imej latar belakang boleh dipaparkan Sudah tentu, kawasan yang boleh dipaparkan ditentukan oleh nilai atribut.
1. Atribut kotak sempadan:
Nilai atribut ini menetapkan bahawa imej latar belakang boleh dipaparkan dalam julat sempadan Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
}
.border-box{
background-clip: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>The prestasi kod di atas boleh Ia boleh dilihat bahawa imej latar belakang boleh dipaparkan dalam sempadan, tetapi imej latar belakang tidak dipaparkan di sempadan kiri dan atas Ini kerana ia dihadkan oleh atribut asal latar belakang, kerana ini atribut menentukan kawasan dari mana imej latar belakang dilukis , dalam keadaan lalai, kawasan padding dilukis (termasuk padding).
2. Atribut padding-box:
Atribut ini menetapkan bahawa imej latar belakang boleh dipaparkan dalam julat padding pada masa ini, imej latar belakang tidak boleh dipaparkan dalam julat sempadan contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
}
.padding-box{
background-clip:padding-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
<li class="padding-box"></li>
</ul>
</body>
</html>Seperti yang dapat dilihat daripada prestasi kod di atas, imej latar belakang boleh dilukis dalam julat padding, tetapi bukan dalam julat sempadan.
3.content-box:
Atribut ini menetapkan bahawa imej latar belakang boleh dipaparkan dalam kawasan kandungan, iaitu kawasan tidak termasuk padding dan border Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:150px;
height:100px;
padding:10px;
margin-top:10px;
list-style:none;
}
.content-box{
background-clip:content-box;
background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
<li class="content-box"></li>
</ul>
</body>
</html> Ia boleh dilihat daripada prestasi kod di atas bahawa imej latar belakang hanya boleh dipaparkan dalam julat kandungan pada masa ini.
IV.tex:
Pangkas ke luar daripada bentuk kandungan latar depan (seperti teks) sebagai kawasan pemangkasan, iaitu, hanya imej latar belakang dipaparkan dalam bentuk kandungan latar depan, sebagai contoh, hanya teks yang dipaparkan latar belakang.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
border:10px dashed green;
width:250px;
height:200px;
padding:10px;
margin-top:10px;
list-style:none;
background-repeat:no-repeat;
font-size:60px;
font-weight:900
}
.border-box{
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
/*color:transparent;*/
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">php中文网</li>
</ul>
</body>
</html>Seperti yang dapat dilihat daripada prestasi kod di atas, imej latar belakang hanya dipaparkan dalam teks, tetapi perlu diperhatikan bahawa isian teks- warna atau nilai atribut warna teks mesti ditetapkan kepada telus, jika tidak, imej latar belakang akan disekat.
bahagian seterusnya