background-origin属性使用示例

background-origin用来决定background-position的参考原点，即背景图片定位的起点。取值有content-box,padding-box,padding-box三种。

content-box:背景图像相对于内容框来定位：

.padding-box{

     width:  314px;

     height:  500px;

     border:  1px  solid  rgba( 0, 0, 0, .5);

     background:  orange  url( img/k.jpg)  no-repeat  left  top;

     padding:  20px;

     margin:  30px;

     background-origin:  content-box;

     -webkit-background-origin: content-box;

     -moz-background-origin:  content-box;

     -o-background-origin:  content-box;

     -ms-background-origin:  content-box;

    

}

padding-box:背景图像相对于内边距来定位：

.padding-box{

     width:  314px;

     height:  500px;

     border:  1px  solid  rgba( 0, 0, 0, .5);

     background:  orange  url( img/k.jpg)  no-repeat  left  top;

     padding:  20px;

     margin:  30px;

     background-origin:  padding-box;

     -webkit-background-origin: padding-box;

     -moz-background-origin:  padding-box;

     -o-background-origin:  padding-box;

     -ms-background-origin:  padding-box;

    

}

border-box背景图像相对于边框来定位：

.padding-box{

     width:  314px;

     height:  500px;

     border:  1px  solid  rgba( 0, 0, 0, .5);

     background:  orange  url( img/k.jpg)  no-repeat  left  top;

     padding:  20px;

     margin:  30px;

     background-origin:  border-box;

     -webkit-background-origin: border-box;

     -moz-background-origin:  border-box;

     -o-background-origin:  border-box;

     -ms-background-origin:  border-box;

    

}

当属性值为border-box时图像是最往左的。