设置背景图片的大小，以长度值或百分比显示（数值包括 长度length和百分比percentage），还可以通过cover和contain来对图片进行伸缩。
语法：background-size: auto | <长度值> | <百分比> | cover | contain
bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain
并且会根据背景原点位置 background-origin 设置其图片覆盖的范围。
取值说明：
1、auto：默认值，不改变背景图片的原始高度和宽度；
length，percentage，根据给定长度值或者百分比来调整背景图片大小，第一个值为设置图片宽度，第二个值为图片的高度，但是不管是用什么值，都不能为负值；
这三个值最小可重复一次，最大重复两次。
假如只给定一个值，那么第二个自动的为 '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、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。
例如1
.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相反，其会正好覆盖整个背景相对区域，但是背景图片的某些部分就看不见，如下图的狗的下半身和右侧身体显示不全。
例如2：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>背景图片大小</title>
<style type="text/css">
.demo {
background: url(http://static.mukewang.com/static/img/logo_index.png) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size:cover;
}
</style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
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;
}
当图片恰好自适应铺满元素的宽度或者高度，那么元素的会有空白处存在，也就是图中红色框框都显示了空白。
说说背景图片计算值
假如说只是拿单一的数值或者具体数值来解释那理解起来应该不难，但假如用混合长度来说，可能会有点一下子明白不上来。
规范给了几个例子，不妨拿出来一下：先声明，所以的元素尺寸为 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就发挥其重要的作用了，我们可以通过对背景图片大小的自适应缩放，而不会影响到起美观性又能全部显示我们所需要的效果。
background-size （设置背景图片的大小）的更多相关文章
-
background-size 设置背景图片的大小
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...
-
CSS3设置背景图片的大小
设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...
-
qt 设置背景图片
博客出处:http://www.cppblog.com/qianqian/archive/2010/07/25/121238.htm 工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和Q ...
-
iOS下uiview和uiscrollview设置背景图片的源码
1.uiscrollview 设置背景图片 // Setup the Scroll ViewUIScrollView*tempScrollView=(UIScrollView*)self.view;t ...
-
css网页中设置背景图片的方法详解
在css代码中设置背景图片的方法,包括背景图片.背景重复.背景固定.背景定位等 用css设置网页中的背景图片,主要有如下几个属性: 1,背景颜色 {">说明:参数取值和颜色属性一样 ...
-
css3-11 如何改变背景图片的大小和位置
css3-11 如何改变背景图片的大小和位置 一.总结 一句话总结:css3相对css2本身就支持改变背景图片的大小和位置. 1.怎么设置背景不填充padding部分? background-orig ...
-
Qt 设置背景图片3种方法（三种方法：QPalette调色板，paintEvent，QSS）
方法1. setStylSheet{"QDialog{background-image:url()"}} //使用styleSheet 这种方法的好处是继承它的dialog都会自 ...
-
为窗体设置背景图片-UI界面编辑器(SkinStudio)教程
1.1. 为窗体设置背景图片 在窗体的Background属性中选择图片设置为窗体背景图片
-
[Netbeans]为面板设置背景图片
与AndroidStudio等类似IDE不同,在Netbeans开发桌面程序时,不可以直接通过src=@drawable 等方法为窗口设置背景图片.这里介绍一种简便的方法: 1:首先,拖动一个面板到f ...
随机推荐
-
使用IIS发布WCF服务
上一篇是Windows服务为宿主的WCF服务,现在用IIS为宿主发布WCF服务. 第一步:肯定是新建一个WCF服务啦[是WCF服务应用程序],然后在解决方案上再次添加一个新项目[我们选择WCF服务库, ...
-
ServletContext与网站计数器
什么是ServletContext? ServletContext是服务器的一个公用的空间,是不同的浏览器共享的一个数据. 由图可以看出ServletContext和Cookie与session之间的 ...
-
Spring-RMI固定端口
Spring-RMI固定端口 最近接到一个需求项目所应用的RMI端口(数据传输端口)为随机指定的,项目要求对其端口固定,费劲周折找了很多资料,最后解决了问题. 其实解决问题的方法及其简单,只需要在 ...
-
java-java runtime 入门
1.内存管理:Java提供了无用单元自动收集机制.通过totalMemory()和freeMemory()方法可以知道对象的堆内存有多大,还剩多少.Java会周期性的回收垃圾对象(未使用的对象),以便 ...
-
vbox共享文件 挂载
环境:主机操作系统是Windows 7,虚拟机是open suse 12.0,虚拟机是VirtualBox 4.2.1. 1. 安装增强功能包(Guest Additions) 安装好open sus ...
-
清除浮动4-插入多余的div
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
-
CompareValidator ASP控件
定义和用法 CompareValidator 控件用于将由用户输入到输入控件的值与输入到其他输入控件的值或常数值进行比较. 注释:如果输入控件为空,则不会调用任何验证函数,并且验证将成功.使用 Req ...
-
子查询有OR无法展开,改写成union
SELECT A.* FROM (SELECT CD.*, nvl(CV.SUM_CI_BALANCE, 0) as SUM_CI_BALANCE, ...
-
XML的DTD约束
DTD约束:DTD的声明和引用 1.内部DTD文档 <!DOCTYPE 根元素 [定义内容]> 2.外部DTD文档 <!DOCTYPE 根元素 SYSTEM "DTD文件路 ...
-
50道java线程面试题
50道Java线程面试题 下面是Java线程相关的热门面试题,你可以用它来好好准备面试. 1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序 ...