CSS3之背景定位原点background-origin

当前位置 : 首页 > 网页制作 > CSS > CSS3之背景定位原点background-origin

CSS3之背景定位原点background-origin

来源: 作者: 时间:2016-01-28 09:27
背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个:border、padding和content。下面将围绕着三
  背景定位原点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代码:
[] 
<div></div>  
 
  预览效果:
 
  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代码:
[html]  
<div></div>  
 
  预览效果:
Tag:
网友评论

<