背景クリップ
は、実際のニーズに合わせて背景画像を適切にトリミングするために使用されます。
文法構造:
background-clip: border-box|padding-box|content-box|no-clip
この属性は、背景画像を表示できる領域を指定するために使用されます。もちろん表示可能です。エリアは属性値によって決まります。
一.border-box 属性:
この属性値は、境界線の範囲内に背景画像を表示できることを規定します。 コード例は次のとおりです。
<!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> 上記のコードのパフォーマンスから、境界線には背景画像を表示できますが、背景画像を描画する領域を指定するbackground-origin属性の制限によるものです。デフォルトでは、パディング領域が描画されます（パディングを含む）。
2.padding-box 属性:
この属性は、背景画像をパディング範囲内に表示できることを規定します。コード例は次のとおりです。
3.content-box: この属性は、コンテンツ領域、つまりパディングとボーダーを除いた領域に背景画像を表示できることを規定します。コード例は次のとおりです。上記コードの実行では背景画像をコンテンツ範囲内でのみ表示することができます。
前景コンテンツ (テキストなど) の形状から外側に向かってトリミング領域として切り抜きます。つまり、前景コンテンツの形状内に背景画像のみが表示されます。たとえば、背景はテキスト内に表示されます。 コード例は次のとおりです:
<!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>上記のコードの実行からわかるように、背景画像はテキスト内にのみ表示されますが、text-fill-color または color 属性の値に注意してください。テキストは透明に設定する必要があります。そうしないと、背景画像が隠れてしまいます。
新しいファイル
<!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>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
