背景クリップ
は、実際のニーズに合わせて背景畫像を適切にトリミングするために使用されます。
文法構(gòu)造:
background-clip: border-box|padding-box|content-box|no-clip
この屬性は、背景畫像を表示できる領(lǐng)域を指定するために使用されます。もちろん表示可能です。エリアは屬性値によって決まります。
一.border-box 屬性:
この屬性値は、境界線の範(fàn)囲內(nèi)に背景畫像を表示できることを規(guī)定します。 コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</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> 上記のコードのパフォーマンスから、境界線には背景畫像を表示できますが、背景畫像を描畫する領(lǐng)域を指定するbackground-origin屬性の制限によるものです。デフォルトでは、パディング領(lǐng)域が描畫されます（パディングを含む）。
2.padding-box 屬性:
この屬性は、背景畫像をパディング範(fàn)囲內(nèi)に表示できることを規(guī)定します。コード例は次のとおりです。
3.content-box: この屬性は、コンテンツ領(lǐng)域、つまりパディングとボーダーを除いた領(lǐng)域に背景畫像を表示できることを規(guī)定します。コード例は次のとおりです。上記コードの実行では背景畫像をコンテンツ範(fàn)囲內(nèi)でのみ表示することができます。
前景コンテンツ (テキストなど) の形狀から外側(cè)に向かってトリミング領(lǐng)域として切り抜きます。つまり、前景コンテンツの形狀內(nèi)に背景畫像のみが表示されます。たとえば、背景はテキスト內(nèi)に表示されます。 コード例は次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip屬性-php中文網(wǎng)</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>上記のコードの実行からわかるように、背景畫像はテキスト內(nèi)にのみ表示されますが、text-fill-color または color 屬性の値に注意してください。テキストは透明に設(shè)定する必要があります。そうしないと、背景畫像が隠れてしまいます。
