背景原点

この属性は CSS3 の新しい属性です。もちろん、ブラウザーの互換性の問題 (主に低レベルの IE ブラウザーによる) がありますが、時間が経つにつれて、CSS3 が主流になるでしょう。この属性の使用例を示します。財産。
構文構造:

background-origin:border-box|padding-box|content-box

パラメータはそれぞれ、背景画像がボーダー、パディング(デフォルト値)、またはコンテンツ領域のいずれから表示されるかを示します。

この属性は要素内の背景画像の描画を開始する位置を指定するために使用されます。もちろん、背景画像の描画を開始する位置は以下で個別に紹介します。
一.border-box:
この属性値は、背景画像が境界領域 (境界線を含む) から描画されることを規定します。コード例は次のとおりです。

<!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>

上記のコードから、背景画像は境界領域を含む境界からレンダリングされます。
2.padding-box:
パディング領域を含むパディングから背景画像を描画することを規定しています。コード例は以下の通りです。

<!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>

上記コードでは、背景画像を描画開始としています。パディングエリアから。
Three.content-box:
この属性値は、背景画像がコンテンツ領域から描画されることを規定します。いわゆるコンテンツ領域は、ボーダーとパディング領域です。コード例は次のとおりです。上記のコードを見るとわかるように、背景画像はコンテンツ領域から描画されます。

描画はコンテンツ領域から開始することが規定されているのに、なぜパディング領域と境界領域の両方に背景画像が表示されるのか、これに混乱する人もいるかもしれません。ここで誰もが描画と開始の違いを理解する必要があります。「描く」ということは 2 つの異なる概念です。

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転