CSS3之背景定位原点background-origin

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

 

一、background-origin的语法

 

 1、background-origin的语法

 

[css][/css] view plaincopyprint?

  1. 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][/css] view plaincopyprint?

  1. /*Gecko*/
  2. -moz-background-origin: padding-box || border-box || content-box;
  3. /*Webkit*/
  4. -webkit-background-origin: padding-box || border-box || content-box;
  5. /*Presto*/
  6. -o-background-origin: padding-box || border-box || content-box;
  7. /*W3c标准*/
  8. background-origin: padding-box || border-box || content-box;

 

 

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

 

1、padding-box效果

 

CSS代码:

 

[css][/css] view plaincopyprint?

  1. 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;
  2.     -webkit-background-origin: padding-box;
  3.         /*这是默认的位置*/
  4. }

 

 

HTML代码:

 

[html][/html] view plaincopyprint?

  1. <div></div>

 

 

预览效果:

梦龙小站

 

2、border-box效果

 

CSS代码:

 

[css][/css] view plaincopyprint?

  1. 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;
  2.     -webkit-background-origin: border-box;
  3. }

 

 

HTML代码:

 

[html][/html] view plaincopyprint?

  1. <div></div>

 

 

预览效果:

梦龙小站

 

3、content-box效果

 

CSS代码:

 

[css][/css] view plaincopyprint?

  1. 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;
  2.     -webkit-background-origin: content-box;
  3. }

 

 

HTML代码:

 

[html][/html] view plaincopyprint?

  1. <div></div>

 

 

预览效果:

梦龙小站

 

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

标签