正如属性意义一样，三者都是来定义背景图显示尺寸大小的，但是三者还是有一点区别的：
cover：是按照等比缩放铺满整个区域。如果显示如果显示比例和显示区域的比例相差很大某些部分会不显示，比如长度比宽度大很多，则宽度左侧会有一部分不显示。
100%：长宽100%显示，可能会拉升图片。
contain：也是等比缩放，按照某一边来覆盖显示区域的，会有白边
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个...
background-size cover和contain的区别
相同点：图片都是等比例缩放
不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示
比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示
&!DOCTYPE html&
&title&am...
background-size：100% 100%;---按容器比例撑满，图片变形；
background-size：---把背景图片放大到适合元素容器的尺寸，图片比例不变。IE8及以下版...
background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器
background-size：100% 100%;---按容器比例撑满，图片变形；
最近在重温CSS，发现好多东西都忘了，比如background－size属性中，contain与cover的区别。菜鸟教程上是这么说的： 有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适...
在写一个非响应式设计的后台PC端页面的时候发现用background-size:cover的时候背景会重复，有问题的代码如下：
html , body{
height: 100%;
http://www.cnblogs.com/tugenhua0707/p/5260411.html
理解CSS3中的background－size(对响应性图片等比例缩...
ackground-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height...
语法：background-size:[||auto]{1,2}|cover|contain
没有更多推荐了，contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个屏幕)
length：设置背景图像的高度和宽度。如果只设置一个值，则第二个值会被设置为“auto”。
percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为“auto”。
background-size cover和contain的区别
相同点：图片都是等比例缩放
不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示
比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示
背景图片大小background-size中cover与contain区别
&!DOCTYPE html&
&title&am...
background-size中，100%和cover的区别
background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器
background-size：100% 100%;---按容器比例撑满，图片变形；
background-size值为cover和值为100%的区别
background-size：100% 100%;---按容器比例撑满，图片变形；
background-size：---把背景图片放大到适合元素容器的尺寸，图片比例不变。IE8及以下版...
完美的背景图全屏css代码 – background-size:cover?
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法
需要的效果
图片以背景的形式铺满整个屏幕，不留空白区域保持图像的纵横比（图片不变形）图片居中不出现滚动条多浏览器支持
background-size:cover与-webkit-background-size
在使用jade和styl写手机页面时，且元素为背景图片时，常会使用到background-size cover，它的意思是使背景图片铺满整个元素，且保证背景图片的宽高比。
即当图片小于容器时，又无法...
background简写之默认repeat不cover或contain
css中使用background 的简写形式，默认是 repeat 的，图片重复来重复去，找了半天没发现怎么写 cover ，contain 等 css3 才出来的属性。无意中搞出来，于是记录一下：b...
background-size
contain 与cover的区别
最近在重温CSS，发现好多东西都忘了，比如background－size属性中，contain与cover的区别。菜鸟教程上是这么说的： 有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适...
关于background-size各个参数详解
今天公司的要做一个名叫梦幻恋舞的webapp，在设置背景图的时候，明明已经把整个区域的高宽设置成100%了，但是背景图总不能全覆盖整个网页。考虑使用background-size这个属性，在用的时候发...
没有更多推荐了，css3的一个控制背景的属性，background-size可以缩放大小啦
background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。
cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。
&div class="div" &&h1&雨打浮萍&/h1&&p&专注于web前端开发&/p&&/div&
height:120
border:1px solid #
padding:10
background-image:url(bg.jpg);
background-size:
效果如下：
contain：保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含。
height:120
border:1px solid #
padding:10
background:url(bg.jpg) no-
background-size:
font-family:Microsoft Y
效果如下：
background-size:150px 80
显示效果：
这里为背景图片设置宽高，图片会直接被拉伸或缩放，不保持原来的比例。如果只设置一个数值，另外一个值默认为auto，它将按图片原比例来伸缩。
percentage
background-size:40% 60%;
这里需要特别注意一下，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。
浏览器的兼容性
支持浏览器：IE(9)、firefox、Chrome、Opera、Safari。
/*Mozilla*/
-moz-background-size:auto||&length&||&percentage&||cover||
/*Webkit*/
-webkit-background-size:auto||&length&||&percentage&||cover||
/*Presto*/
-o-background-size:auto||&length&||&percentage&||cover||
background-size:auto||&length&||&percentage&||cover||
注意：虽然我上面写到了各浏览器需要添加自己独特的方式，但并不代表这个样式一定要添加，在我写的事例中并没有为各浏览写自己的样式，仍然执行很好。
　　哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站，并且能够搭建符合百度排名规范的网站基底，使您的网站无需额外费用，即可稳步提升排名至首页。欢迎体验最佳的。
上一篇：没有了
法律顾问：三水律师事务所 孙律师
Copyright & 2014
All rights reserved.
网站建设咨询热线：400-888-4510 公司地址：哈尔滨市南岗区轩辕路6号华山国际商务中心206室对于这两个属性，官网是这样解释的：
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
等比例缩放图象到垂直或者水平其中一项填满区域。
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
等比例缩放图象到垂直和水平两项均填满区域。
读了还是不懂，那么看下面的例子：
contain，按比例调整背景图片，使得其图片宽高比自适应整个元素的背景区域的宽高比，因此假如指定的图片尺寸过大，而背景区域的整体宽高不能恰好包含背景图片的话，那么其背景某些区域可能会有空白。看以下代码
width:<span style="color: #px;
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:<span style="color: #px;
background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;
/*元素相对区域宽度为50*/
background-size:contain;
&当图片恰好自适应铺满元素的宽度或者高度，那么元素的会有空白处存在，也就是图中红色框框都显示了空白。
3 .&cover，按比例调整背景图片，这个属性值跟contain正好相反，背景图片会按照比如自适应铺满整个背景区域。假如背景区域不足以包含背景图片的话，那么背景图片就会被咔嚓。
width:<span style="color: #px;
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:<span style="color: #px;
background:url(http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;
/*元素相对区域宽度为50*/
background-size:cover;
当使用了&cover&这个值的时候，那么正好就跟contain相反，其会正好覆盖整个背景相对区域，但是背景图片的某些部分就看不见，如下图的狗的下半身和右侧身体显示不全。
阅读(...) 评论()css3中background-size设置背景大小的问题_百度知道
css3中background-size设置背景大小的问题
我的代码如下&!doctypehtml&&html&&head&&metacharset=&utf-8&/&&title&&/title&&style&body{background-image:url(5.jpg);background-repeat:no-background-size:}&/...
我的代码如下&!doctype html&&html&&head&&meta charset=&utf-8&/&&title&&/title&&style&body{ background-image:url(5.jpg); background-repeat:no- background-size: }&/style&&/head&&body&&/body&&/html&显示效果如图只有一小块而且设置数值或者百分比就会显示成这样如下只有一小条求大神指点，ie crome firefox都是最新版本都试过了，结果一样设置cover正常，没有问题，我的图片本身是600*900的
&#xe6b9;答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
小飞鱼windmill
小飞鱼windmill
采纳数：64
获赞数：69
页面还没有任何元素撑开body，所以body暂时高度为0，你背景设置多大都是没用的，只显示一小部分。
来自电脑网络类芝麻团
采纳数：121
获赞数：323
擅长：暂未定制
参与团队：
我以前遇到这样的情况时
我就不用背景来写。我直接插入图片，然后设置图片的index为0
本回答被网友采纳
来自电脑网络类芝麻团
采纳数：70
获赞数：95
参与团队：
因为你的body没有内容，也就是现在没有宽高值，背景图片不会自动撑开。你设定一个body的宽高值就好了.
你可以选择其他的background-size的值，使用cover就相当于全部放大100%，当然可以自己设定可以采用两种方式，一种是百分比和像素，比如设定为background-size:200%或者background-size:700当然具体多大自己设定
其他1条回答
为你推荐：
其他类似问题
您可能关注的内容
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。