CSS3之背景定位原点background-origin
背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个:border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。
一、background-origin的语法
1、background-origin的语法
[css]
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的兼容写法
[css]
/*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代码:
[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代码:
[html]
<div></div>
预览效果:
2、border-box效果
CSS代码:
[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代码:
[html]
<div></div>
预览效果:
补充:web前端 , HTML/CSS ,