CSS3之背景定位原点background-origin

Dear 丶 2022-08-28 03:55 380阅读 0赞

背景定位原点background-origin是CSS3新添加的有关背景的属性，主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个：border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。

**一、background-origin的语法**

**1、background-origin的语法**

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

**　2、background-origin的属性值**

(1)padding-box:此值为background-origin的默认值，决定background-position起始位置。从padding的外边缘(border的内边缘)开始显示背景图片;

(2)border-box:此值决定background-position起始位置从border的外边缘开始显示背景图片;

(3)content-box:此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片;

**二、background-origin的兼容**

**1、background-origin的兼容情况**

![梦龙小站][SouthEast]

**2、background-origin的兼容写法**

/*Gecko*/
    -moz-background-origin: padding-box || border-box || content-box;
    /*Webkit*/
    -webkit-background-origin: padding-box || border-box || content-box;
    /*Presto*/
    -o-background-origin: padding-box || border-box || content-box;
    /*W3c标准*/
    background-origin: padding-box || border-box || content-box;

**三、background-origin的实例(在谷歌浏览器预览效果哟)**

**1、padding-box效果**

CSS代码：

div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;
    	-webkit-background-origin: padding-box;
            /*这是默认的位置*/
    }

HTML代码：

**预览效果：**

![梦龙小站][SouthEast 1]

**2、border-box效果**

CSS代码：

div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;
    	-webkit-background-origin: border-box;
    }

HTML代码：

**预览效果：**

![梦龙小站][SouthEast 2]

**3、content-box效果**

CSS代码：

div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;
    	-webkit-background-origin: content-box;
    }

HTML代码：

**预览效果：**

![梦龙小站][SouthEast 3]

CSS3之背景定位原点background-origin就为大家介绍到这里了，希望能对大家有所帮助。更多有关CSS3的内容敬请关注梦龙小站有关CSS3的更新，感谢大家长期以来对梦龙小站的支持。

[SouthEast]: /images/20220828/cd60e60af99a461fb010782ea666f211.png
[SouthEast 1]: /images/20220828/67d09982fe2d49da9fb62d9bf37ffc28.png
[SouthEast 2]: /images/20220828/fd54c474070448c19c2ea7934d6dd0b4.png
[SouthEast 3]: /images/20220828/f3c35e3a2ef342a487dba62921275885.png