CSS3设置背景图像开始位置background-origin（实例与CSS2.1比较）

　　CSS2.1 不能设置背景图像从那里开始，默认从边框内边开始；CSS3 新增了 background-origin，用于设置背景图像开始位置，从此背景图片也从单一的从边框内边开始变为从边框（外边）、padding区域和content区域开始。

　　background-origin 的语法规则比较简单，只需设置 box 即可，可以设置多个 box，每个 box 可以取三个值，也就是文章开头所说背景图片开始位置。

 

　　一、background-origin语法规则

　　background-origin：<box> [ , <box> * ]

　　<box> = border-box | padding-box | content-box

　　二、语法说明

　　1、background-origin 可以设置多组背景图片开始位置

　　A、<box> 表示第一组背景图片开始位置，不能省略；

　　B、[]中的 <box> 表示第二组背景图片开始位置，可以省略；

    C、* 表示第三组、第四组、……第n组背景图片开始位置，可以省略；

 

　　2、<box> 可以取三个值，默认值为 padding-box，与 CSS2.1 相同，三个值分别如下：

　　A、border-box：设置背景图像从padding区域外边开始显示；

　　B、border-box：设置背景图像从border区域外边开始显示，默认值；

　　C、content-box：设置背景图像从content区域外边开始显示。

 

　　三、background-origin实例

　　1、CSS2.1实例

　　html代码：

　　<div class="css21">CSS2.1背景图像开始位置</div>

　　CSS代码：

　　.css21{width:300px; height:250px; color:Blue; font-weight:700; border:8px dashed 787878; padding:10px; background:url(/lsfile/ad/ad300.jpg) no-repeat;}

　　效果图：

 

　　2、CSS3 background-origin实例

　　html代码：

　　<ul class="ul-background-origin">
　　　　<li class="border-box">border-box：背景图像从padding区域外边开始显示</li>

　　　　<li class="padding-box">padding-box：背景图像从border区域外边开始显示</li>

　　　　<li class="content-box">content-box：背景图像从content区域外边开始显示</li>
　　</ul>

　　CSS代码：

　　<style type="text/css">

　　.ul-background-origin{color:Blue;font-weight:700;}
　　
　　.ul-background-origin li{width:300px;height:250px;border:8px dashed #787878; margin-top:20px; 　　padding:10px;background:url(/images/prod.jpg) no-repeat;}

　　

　　.ul-background-origin li.border-box{background-origin:border-box;}
　　
　　.ul-background-origin li.padding-box{background-origin:padding-box;}

　　.ul-background-origin li.content-box{background-origin:content-box;}

　　</style>

　　效果图：

• border-box：
  背景图像从padding区域外边开始显示
• padding-box：
  背景图像从border区域外边开始显示
• content-box：
  背景图像从content区域外边开始显示