CSS3之背景定位原点background-origin_html/css_WEB-ITnose

背景定位原点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的兼容情况

　　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://HdhCmsTestleemagnum测试数据/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;

-webkit-background-origin: padding-box; /*这是默认的位置*/ }

　　HTML代码：

查看更多关于CSS3之背景定位原点background-origin_html/css_WEB-ITnose的详细内容...