css3新增3大背景属性clip,size,origin

前言

本篇文章有点长,假如你没有耐心看完请直接点击浏览器右上角按钮,要么就是静下来慢慢看完,假如有理解不到位的地方或者我说得不好的地方,那么问题就不要来了,直接丢砖过来。谢谢!O(∩_∩)O

好了,最近进度有点慢了,继续来发css3的教程,写完css3背景属性之后我去研究下Google 开发者调试工具之webapp调试工具栏。智能手机的出现让HTML5+CSS3有了一个全新的舞台去演绎。很多的单页面都应用到了css3的酷炫效果,所以捣腾一下webapp开发工具应该可以帮助自己了解一下相关知识。算是一个加分项么。。。

金馆长-赞

前面的几篇文章已经介绍了边框属性,那么今天我们正式来入手这个背景属性,css3中新增了3大属性,分别是背景裁剪(background-clip)、背景尺寸(background-size)、背景起点(background-origin),因为涉及到的知识点不是很多,所以在这里一一写出来,算是整合吧。

背景裁剪 background-clip

先来说说背景裁剪属性clip,假如你看过前面的文章的话,那么你就会对裁剪属性有一丝了解。不过边框图片属性中是切片属性slice而非clip,对于其含义,前者是用刀子随便切,后者是为了某个区域而裁剪额外的区域,比如说桌布,想把尺寸为1.2M1M桌布正正方方地码在尺寸为1M1M的书桌上,那么必须用剪刀把多余的0.2M卡擦掉!而slice可不管你这么多,使出十八般武艺一道乱剪。先来看看clip的语法

属性名: **background-clip**
属性值: < box >  , < box > *
初始值: border-box
应用于: 所有元素
继承性:
百分比: N/A
计算值: 根据指定

背景裁剪 background-clip确定了背景画布区域,对于box属性值,W3C这么解释:
<box> = border-box | padding-box | content-box

语法解释:

  1. border-box:背景图片或者颜色描绘区域延伸到边框边界,这是默认值
  2. padding-box:背景图片或者颜色描绘区域只能在盒子padding区域
  3. content-box:背景图片或者颜色描绘只能在内容区域起作用。
  4. 我们说过*这个符号就是前面的属性值可以重复一次也可以重复多次,假如重复多次必须要用 “,”来隔开。

背景裁剪三个属性值的调用demo

手机党的用户请拿出手机↓

只要记住对于背景裁剪background-clip都是基于盒子box来裁剪,分别在边框盒子、内边距盒子还有内容区盒子处裁剪。

背景图片原点background-origin

origin在英文的解释是起点,开端,起源,原点的意思,为了方便,我这里用了原点的意思。因为按照我的个人了解是这样:假如一张桌布想要改在桌子上,那么就必须先确定桌布从桌子的哪个地方先盖的,这个就是桌布的原点。所以origin在这里的意思估摸应该就是这样。既然是这样,那么这个原点的地方也跟背景裁剪属性clip一样分成三个盒子:border-box | padding-box | content-box

w3c对origin的语法如下:

属性名: **background-origin**
属性值: border-box | padding-box | content-box 
初始值: padding-box
应用于: 所有元素
继承性:
百分比: N/A
计算值: 根据指定

背景图片原点原点属性严格意义上来说是针对css中使用图片属性background-image的情况下使用的,因为只有引用了背景图片之后才能发挥其原点的微妙区别,不信待会看下demo你就会发现的。

语法解释

  1. padding-box,这是它的默认值,于裁剪clip属性默认值有所不同。该值确定了背景相对填充框作为原点位置,并且拉伸整个元素padding盒子,即从左上角到右下角拉伸,整个背景被拉伸自适应元素的宽高,这点在有border-width的时候特别明显;
  2. border-box,规定了背景图片原点位置相对边框盒子
  3. content-box,规定了背景图片原地位置相对内容区盒子

远观不如近邻,请轻戳 背景图片原点demo

手机党的用户请拿出手机↓

效果图如下:

注意:
1.假如背景图片使用了 background-attachment:fixed 那么这个值是没有不起作用的,那么背景区域为初始包含块。
2.假如 background-clip:padding-boxbackground-origin:border-boxbackground-position:top left(也就是初始位置),并且元素有一个非0数值边框宽度,那么左侧和顶部边框的图片会被裁剪。

/*第1点注意点*/
.im-com{
    padding:10px;
    background-image:url(http://img.xiaoho.com/mystar/mada4.jpg);
    background-position: top left;
}
.no-effect{
    background-attachment:fixed; /*使用了fixed,那么在origin就会失效*/ 
    background-origin:content-box;
}
.normal{background-origin:content-box;/*不使用fixed*/}

/*第2点注意点*/
.padding-box{
    background-image:url(http://img.xiaoho.com/mystar/mada4.jpg);
    background-position:top left; 
    background-origin:padding-box;
    border:10px #ccc;/*变宽宽度非负数,使用padding-box*/
    border-style:dashed dotted;
}
.border-box{
    background-image:url(http://img.xiaoho.com/mystar/mada4.jpg);
    background-position:top left;
    background-origin:border-box;
    border:10px #ccc;/*变宽宽度非负数,使用border-box*/
    border-style:dashed dotted;
}

远观不如近邻,请轻戳 背景图片原点2点注意

手机党的用户请拿出手机↓

效果图如下:

图片中画圈圈的地方就是第二点注意点,假如元素没有设置边框或者为透明边框,那么设置padding-boxborder-box似乎看上去都是一样的,但是假如设置了一个非负的边框宽度,那背景图片的原点位置将会不一样,padding-box元素左上角为原点向右下角进类似拉伸,而 border-box 则是从元素边框开始作为起点位置。

后话

为什么要拿两个属性合成一个来说其实就是其属性值都是一样的,但是其所表达的不尽相同。不过真实用到的该属性的貌似确实有点少,除非是在射击湿非要在设计图上边框和背景分离开来,那可能确实需要用到该属性。

加班加点完成了这几个属性一起合并了,,,,,,

好了第二天更新background-size,那么就更新,小文章一篇,希望大家一起提高。

background-size 可以设置背景图片的大小,数值包括 长度length和百分比percentage。 并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。那么下面我们一起来了解这个background-size属性吧。

background-size语法

w3c对background-size的语法规定如下:

属性名: background-size
属性值: < bg-size> 其中bg-size = [ < length> | < percentage> | auto ]{1,2} | cover | contain
初始值: auto auto
应用于: 所有元素
继承性:
百分比: 见下文注解
计算值: 根据指定

语法解释

1 . lengthpercentage,根据给定长度值或者百分比来调整背景图片大小。auto为默认值,这三个值最小可重复一次,最大重复两次。对于这些值有以下解释:

第一个值为设置图片宽度,第二个值为图片的高度;但是不管是用什么值,都不能为负值

假如只给定一个值,那么第二个自动的为 auto

假如指定为 percentage百分比值,那么背景图大小是根据相对的背景区域来做调整,这个背景区域是由background-origin来来决定的。这在上面已经有提到过了关于图片原点的讨论。这里有必要提到 假如background-attachment:fixed,那么其背景相对区域就是初始包含块也就是视窗。

/* 一个值: 这个值指定图片的宽度,那么第二个值为auto */
background-size: auto  
background-size: 50%  
background-size: 3em  
background-size: 12px

/* 两个值: 第一个值指定图片的宽度,第二个值指定图片的高度 */
background-size: 50% auto  
background-size: 3em 25%  
background-size: auto 6px  
background-size: auto auto  
/*多重背景,请用逗号隔开,在CSS语法中凡语法后跟*或者#,都是可以无限重复的,但是必须用逗号隔开。 */
background-size: auto, auto     /* 不要跟background-size: auto auto混淆了 */  
background-size: 50%, 25%, 25%  
background-size: 6px, auto, contain

background-size: inherit  

2 . contain,按比例调整背景图片,使得其图片宽高比自适应整个元素的背景区域的宽高比,因此假如指定的图片尺寸过大,而背景区域的整体宽高不能恰好包含背景图片的话,那么其背景某些区域可能会有空白。看以下代码

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
    background-size:contain;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
    background-size:contain;
}


当图片恰好自适应铺满元素的宽度或者高度,那么元素的会有空白处存在,也就是图中红色框框都显示了空白。

3 . cover,按比例调整背景图片,这个属性值跟contain正好相反,背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话,那么背景图片就会被咔嚓。

.im-com{
    width:200px;
    height:50px;    
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*图片的宽高为440*440,而元素相对区域高度为50*/ 
    background-size:cover;
}
.im-com-1{
    width:50px;
    height:100px;   
    background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /*元素相对区域宽度为50*/ 
    background-size:cover;
}

当使用了 cover 这个值的时候,那么正好就跟contain相反,其会正好覆盖整个背景相对区域,但是背景图片的某些部分就看不见,如下图的狗的下半身和右侧身体显示不全。

说说背景图片计算值

假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难,但假如用混合长度来说,可能会有点一下子明白不上来。

规范给了几个例子,不妨拿出来一下:先声明,所以的元素尺寸为 100*100

100% 100%背景图片将铺满整个内容区,假如说元素有固有宽高,那么背景图片铺满整个100*100背景区域

div {  
    background-image: url(plasma.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-origin: content-box }
背景图片调整为宽度为50*50,但是背景图片的原点位置为边框box而不是padding-box
p {  
    background-image: url(tubes.png);
    background-size: 50% auto;
    background-origin: border-box }
背景图片尺寸调整为15*15
para {  
    background-size: 15px 15px;
    background-image: url(tile.png)}
这是默认值,也就是auto auto,此时背景图片的尺寸将会是跟图片的固有尺寸一样.

body {  
    background-size: auto;            /* 默认值 */
    background-image: url(flower.png) }
假如两个都是百分比,此时图片就会根据背景区域来按照宽高比自适应,此处背景图片为20*30,但是因为背景重复用了 'round'循环,因此背景区域高度划分了3个33.3等高区域,所以背景图片会自适应调整为20*33.3
p {  
    background-image: url(chain.png);
    background-repeat: no-repeat round;
    background-size: 20% 30% }

MND帮助文档中还提到了关于火狐的渐变图片背景问题,不过那是涉及到Firefox8,规范中不推荐同时使用px和auto,因为在8以前的火狐浏览器不支持重复渲染,但是我在caniuse上看见的版本是31+,so,你就尽情的用吧。并且对于移动浏览器的支持还是非常的好的,请看下图可知,除了opera8部分不支持以外:

应用场景

目前用到 background-size的场景都是基于webapp的背景图上,大致的情况是,比如说最常见的logo作为某个元素的背景,但logo很复杂,假如说我们按照设计图上的去切片的话,那会有两种可能:
1、按照csser的分辨率去切片,比如高度为50px,logo被直接缩放到50px那就会很别扭,而且估计那那画面太美,你都不敢看;
2、按照射击湿设计的分辨率去切的话,有可能设计图的logo尺寸会很大,但是我们csser写的时候高度只有50px,那logo就会显示不全;

这时候background-size就发挥其重要的作用了,我们可以通过对背景图片大小的自适应缩放,而不会影响到起美观性又能全部显示我们所需要的效果。

直接甩出你的手机出来吧。。。↓

参考资料:
http://dev.w3.org/csswg/css-backgrounds/#the-background-origin
http://dev.w3.org/csswg/css-backgrounds/#background-clip
http://dev.w3.org/csswg/css-backgrounds/#background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Notes

本文地址:http://xiaoho.com/?p=823