注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

css3——属性(二):背景(-size、-clip、-origin、multiple)  

2014-08-05 14:38:35|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、背景大小(background-size):

    css2中背景的语法:

background: [<background-color>][,<background-image>][,<background-repeat>][,<background-attachment>][,<background-position>] 

其中background-attachment:为背景图像是否固定或者岁页面的滚动值为(scroll或者fixed),默认为scroll。

1、语法:background-size: auto || <length> || <percentage> || cover || contain

2、取值说明:

  auto:默认,原始高度宽度;

<length>:设置具体值,可改变背景图片的大小,可设置1~2个值,当取一个值另一个为auto;

<percentage>:百分比值,0%~100%之间,可设置1~2个值,当取一个值另一个为auto,只能用于块元素上,背景图片大小根据所在元素宽度的百分比来算;

cover:此值将图片放大,以适合铺满整个容器,会使图片失真;

contain:与cover相反,将背景图片缩小,以适合铺满整个容器,同样会失真。

3、兼容性:

ie9+、其它现代浏览器都支持。

/*Gecko*/

   -moz-background-size: auto || <length> || <percentage> || cover || contain

   /*Webkit*/

   -webkit-background-size: auto || <length> || <percentage> || cover || contain

   /*Presto*/

   -o-background-size: auto || <length> || <percentage> || cover || contain

   /*W3c标准*/

   background-size: auto || <length> || <percentage> || cover || contain

二、背景裁剪(background-clip):

控制背景的显示区域,

1、语法:background-clip : border-box || padding-box || content-box

2、取值说明:

     border-box:为默认值,背景border区域外的将被裁减掉;

    padding-box:背景padding区域外的将被裁剪;

    context-box:背景从context区域外的将被裁剪。


补充:盒模型中background-color和background-image的不同,background-color是从左上角的border开始的,background-image是从padding边缘左上角开始的,都到右下角border,边框部分覆盖在背景上。


3、兼容性:(加私有前缀,但是mozillz下特殊)

Firefox3.6版本以下(包含3.6版本):

-moz-background-clip: border || padding    不支持border-box;padding-box;content-box的语法规则;

Firefox4.0版本以上:

background-clip:  border-box || padding-box || content-box   如果加上了“-moz”,是一种错误的写法。


正确的兼容各浏览器的写法是:

/*Firefox3.6-*/

   -moz-background-clip: border || padding;

   /*Webkit*/

   -webkit-background-clip: border-box || padding-box || context-box;

   /*W3C标准 IE9+ and Firefox4.0+*/

   background-clip: border-box || padding-box || context-box;


实例: .facebook {

background: #3B5A98;

border: 20px solid rgba(134,134,134,0.8);

padding: 10px;

color: #fff;

text-align: center;

width: 150px;

height: 65px;

line-height: 65px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

border-radius: 15px;

font: bold 25px Airal;

-moz-background-clip: padding;

-webkit-background-clip: padding-box;

-o-background-clip: padding-box;

background-clip: padding-box;

   }

效果:

4、补充webkit下的特有用法(只有safari和chrom支持,iPhone上可用):

让图片填存文本,即background-clip:text配合其私有属性-webkit-text-fill-color: transparent

例:.text {

      font-size: 40px;

      text-transform: uppercase;

      -webkit-background-clip: text;

      -webkit-text-fill-color: transparent;

   }

效果:


三、背景起始点(background-origin):

改变background-position的起始位置。

1、语法:

早期的webkit和Gecko内科浏览器(safari、chrome和firefox)都支持一种老式语法:

background-origin:  padding || border || content 

现代新语法(早在新的前面写):

background-origin: padding-box || border-box || content-box

2、取值说明:

padding-box(padding):为默认,background-position起始位置从padding外边缘开始;

border-box(border):background-position起始位置从border的外边缘开始;

content-box(content):background-position起始位置从content的外边缘开始。

3、兼容性:

Internet Explorer 9+、Firefox、Chrome、Safari 以及 Opera 支持,

正确的兼容各浏览器的写法是:

  /*Old Webkit and Gecko*/

   -moz-background-origin: padding || border || content;

   -webkit-background-origin: padding || border || content;

   /*New Webkit and Gecko*/

   -moz-background-origin: padding-box || border-box || content-box;

   -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;

4、实例:

 .borderBox {

     -moz-background-origin: border;

     -webkit-background-origin: border;

     -moz-background-origin: border-box;

     -webkit-background-origin: border-box;

     -o-background-origin: border-box;

     background-origin: border-box;

    border: 20px dashed rgba(255,0,0,0.8);

  }


四、多背景(multiple backgrounds):

同一元素设置多个背景图片,即同一元素上可以设置除background-color外多个background的其它属性。

联写语法:

 background: background-image || background-position/background-size || background-repeat || background-attachment || background-clip || background-origin || background-color

css3属性需加前缀不建议联写。

1、语法:

background : [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],*

  也可以分解成:

  background-image: url1,url2,...,urlN;

  background-repeat: repeat1,repeat2,...,repeatN;

  background-position: position1,position2,...,positionN;

  background-size: size1,size2,...,sizeN;

  backrgound-attachment: attachment1,attachment2,...,attachmentN;

  background-clip: clip1,clip2,...,clipN;

  background-origin: origin1,origin2,...,originN;

  background-color: color;

2、兼容性:

ie9+、firefox3.6+、chrome10+、opera10.6+、safari3.2+。

Multiple Backgrounds在各支持的浏览器下都是统一写法,不需要加上自己的前缀,但如果你使用background-size,background-clip,background-origin时,还是需要另提出写上各浏览器的前缀。

3、实例:

.bigToSmall{

    background-image: url("../images/nine.png"),url("../images/eight.png"),url("../images/seven.png");

    background-position: 0 0pt, 15px 20px, 30px 40px;

    background-repeat: no-repeat;

    -moz-background-origin: content-box;

    -webkit-background-origin: content-box;

    -o-background-origin: content-box;

    background-origin: content-box;

 }


相同的属性值可以只写一个,多背景图片的显示顺序是跟其加载的先后顺序有关(写在最前面的,显示也在最前面),并不跟定位的先后有关。














  评论这张
 
阅读(16)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017