div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

background-size: length|percentage|cover|contain;

来自 http://www.w3school.com.cn/cssref/pr_background-size.asp

CSS3 background-size:cover

浏览器参照基准：Firefox3.6 and Later, Chrome5 and Later, Safari5 and Later, Opera11.50 and Later, IE9.0 and Later

所用图片：

示例：

#background-size-cover{
	background-size:cover;
}

* background-size的cover特定值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

来自 http://demo.doyoe.com/css3/background-size/background-size-cover.htm

测试 cover contain 长度 宽度 百分比  http://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=5

前言

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

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

background-size语法

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

语法解释

1、length，percentage，根据给定长度值或者百分比来调整背景图片大小。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;
}

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

2、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/#background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Notes

本文地址：http://xiaoho.com/?p=827
原创文章，转载请注明来自：◎前端路人乙xiaoho.com

来自 http://sentsin.com/web/939.html

CSS3对于background做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。

1、多个背景图片

在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：

2、新属性：Background Clip

此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下：
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示，而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示，而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值，类似与background-clip: border;

3、新属性: Background Origin

此属性需要与background-position配合使用。你可以用background-position计算定位是从border，padding或content boxes内容区域算起。（类似background-clip）
(1)background-origin：border;
从border边框位置算起
(2)background-origin：padding;
从padding位置算起
(3)background-origin：content;
从content-box内容区域位置算起；

background-clip和background-origin的不同之处www.CSS3.info网站给做了很好的分析讲解。

4、新属性：Background  Size

Background Size属性用来重设你的背景图片。有几个属性值：
(1)background-size: contain;
缩小背景图片使其适应标签元素（主要是像素方面的比率）
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小（主要是像素方面的比率）
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小，来缩放图片的尺寸大小

你可以去CSS 3 specifications站点看一下简单的案例说明。

5、新属性：Background Break

css3里标签元素能被分在不同区域（如：让内联元素span跨多行），background-break属性能够控制背景在不同区域显示。
属性值：

(1)Background-break: continuous;
此属性是默认值，忽视区域之间的间隔空隙（给它们应用图片就好像把它们看成一个区域一样）
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。

6、背景颜色的调整

background-color属性在css3版本里面稍微做了增强，除了指定background color背景颜色之外，还可以对不使用的标签元素背景图片进行去色处理。

background-color: green / blue;此例子里，这背景颜色可能是绿色，然而，如果底部背景图片无效的话，蓝色将代替绿色来显示。如果你没有指定某个颜色的话，它将其视为透明。

7、背景重复的调整

css2里当设置背景的时候，它经常被标签元素截取而显示不全，css3介绍了2个新属性来修复此问题。
space：图片以相同的间距平铺且填充整个标签元素
round：图片自动缩放直到适应且填充整个标签元素

CSS 3 specifications网站对background-repeat: space的使用就是一个现成的例子。

8、Background Attachment 的调整

Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;)，当background-attachment设置为scroll时，背景图片是不随内容滚条滚动的。现在，有了background-attachment:local，就可以做到让背景随元素内容滚动而滚动了。

AD：【Themebetter】【举报有奖】举报themebetter盗版主题获得主题售价50%的优惠

来自  http://www.daqianduan.com/3302.html