Heim  >  Artikel  >  Web-Frontend  >  CSS3之背景定位原点background-origin_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:34:261587Durchsuche

  背景定位原点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://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代码:

 

  

 

 

  预览效果:

 

  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代码:

 

  

 

 

  预览效果:

 

  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代码:

 

  

 

 

  预览效果:

 

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn