背景原點(diǎn)
この屬性は CSS3 の新しい屬性です。もちろん、ブラウザーの互換性の問題 (主に低レベルの IE ブラウザーによる) がありますが、時間が経つにつれて、CSS3 が主流になるでしょう。この屬性の使用例を示します。財産。
構(gòu)文構(gòu)造:
background-origin:border-box|padding-box|content-box
パラメータはそれぞれ、背景畫像がボーダー、パディング(デフォルト値)、またはコンテンツ領(lǐng)域のいずれから表示されるかを示します。
この屬性は要素內(nèi)の背景畫像の描畫を開始する位置を指定するために使用されます。もちろん、背景畫像の描畫を開始する位置は以下で個別に紹介します。
一.border-box:
この屬性値は、背景畫像が境界領(lǐng)域 (境界線を含む) から描畫されることを規(guī)定します。 コード例は次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-origin屬性-php中文網(wǎng)</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> 上記のコードから、背景畫像は境界領(lǐng)域を含む境界からレンダリングされます。
2.padding-box:
パディング領(lǐng)域を含むパディングから背景畫像を描畫することを規(guī)定しています。 コード例は以下の通りです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn" />
<title>background-origin屬性-php中文網(wǎng)</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> 上記コードでは、背景畫像を描畫開始としています。パディングエリアから。
Three.content-box:
この屬性値は、背景畫像がコンテンツ領(lǐng)域から描畫されることを規(guī)定します。 いわゆるコンテンツ領(lǐng)域は、ボーダーとパディング領(lǐng)域です。 コード例は次のとおりです。上記のコードを見るとわかるように、背景畫像はコンテンツ領(lǐng)域から描畫されます。
描畫はコンテンツ領(lǐng)域から開始することが規(guī)定されているのに、なぜパディング領(lǐng)域と境界領(lǐng)域の両方に背景畫像が表示されるのか、これに混亂する人もいるかもしれません。ここで誰もが描畫と開始の違いを理解する必要があります。 「描く」ということは 2 つの異なる概念です。
