css background origin CSS3 background-origin 属性

css background origin

CSS background-origin 属性定义了背景图片的定位区域，即背景图片相对于元素边框的位置。

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

background-origin 属性可以设置三个值：border-box、padding-box 和 content-box。默认值是 border-box。

border-box 是指背景图片相对于元素的边框来定位；padding-box 是指背景图片相对于元素的内边距来定位；content-box 是指背景图片相对于元素的内容区域来定位。

当 background-origin 设置为 border-box 时，背景图片会以元素的边框为参考（即以左上角为原点）进行定位；当 background-origin 设置为 padding-box 时，背景图片会以元素的内边距为参考进行定位；当 background-origin 设置为 content box 时，背景图片会以元素的内容区域为参考进行定位。

background origin 属性在 CSS3 中引入（IE8 不支持该属性）。使用该属性可以很方便地将背景图片正确地映射到元素上。

CSS3 background-origin 属性

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

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