背景起源
此屬性是CSS3中新增，雖然當(dāng)然存在一定的瀏覽器兼容問題（主要是因?yàn)榈桶姹綢E瀏覽器所致），不過隨時時間的推移，CSS3將成為主流，下面就結(jié)合實(shí)例代碼詳細(xì)介紹一下此屬性的用法。
語法結(jié)構(gòu):
background-origin:border-box|padding-box|content-box
參數(shù)分別表示背景圖片是從邊框，還是內(nèi)邊距（默認(rèn)值），或者是內(nèi)容區(qū)域開始顯示。
此屬性用來規(guī)定元素中背景圖片開始繪制的位置，當(dāng)然這個開始繪制的位置和屬性值是有關(guān)的，下面分別做一下介紹。
一.border-box:
此屬性值規(guī)定背景圖片從border區(qū)域開始繪制（包括border），代碼實(shí)例如下:
<!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>由以上代碼可以看出背景圖片是從邊框開始渲染的，包括邊框區(qū)域。
二.padding-box：
規(guī)定背景圖片是從padding開始繪制的，包括padding區(qū)域，代碼實(shí)例如下:
<!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>在以上代碼中，背景圖片是從padding區(qū)域開始繪制的。
三.content-box:
此屬性值規(guī)定，背景圖片是從內(nèi)容區(qū)域開始繪制的，所謂內(nèi)容區(qū)域就是出去border和padding區(qū)域，代碼實(shí)例如下:
<!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;
}
.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>以上代碼的表現(xiàn)可以看出，背景圖片是從內(nèi)容區(qū)域開始繪制的。
有些朋友可能由這樣的，既然規(guī)定了是從內(nèi)容區(qū)域開始繪制，為什么padding和border區(qū)域都有背景圖片的顯示，這里大家要理解這么一個區(qū)別，可以繪制和開始繪制是兩個概念。
