background-size （设置背景图片的大小）

时间 2019-11-18

标签 background size 设置背景图片大小繁體版

原文原文链接

设置背景图片的大小，以长度值或百分比显示（数值包括长度length和百分比percentage），还能够经过cover和contain来对图片进行伸缩。javascript

语法：background-size: auto | <长度值> | <百分比> | cover | containcss

bg-size = [ <length> | <percentage> | auto ]{1,2} | cover | containhtml

而且会根据背景原点位置 background-origin 设置其图片覆盖的范围。java

取值说明：web

一、auto：默认值，不改变背景图片的原始高度和宽度；浏览器

length，percentage，根据给定长度值或者百分比来调整背景图片大小，第一个值为设置图片宽度，第二个值为图片的高度，可是无论是用什么值，都不能为负值；app

这三个值最小可重复一次，最大重复两次。webapp

假如只给定一个值，那么第二个自动的为 'auto'；
假如指定为 percentage百分比值，那么背景图大小是根据相对的背景区域来作调整，这个背景区域是由background-origin来来决定的。这里有必要提到假如background-attachment:fixed，那么其背景相对区域就是初始包含块也就是视窗。url

/* 一个值: 这个值指定图片的宽度，那么第二个值为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

二、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其做为图片宽度值来等比缩放；spa

三、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘之前面百分比得出的数值，当设置一个值时同上；

四、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;
}

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

例如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>

五、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很复杂，假如说咱们按照设计图上的去切片的话，那会有两种可能：
一、按照csser的分辨率去切片，好比高度为50px，logo被直接缩放到50px那就会很别扭，并且估计那那画面太美，你都不敢看；
二、按照射击湿设计的分辨率去切的话，有可能设计图的logo尺寸会很大，可是咱们csser写的时候高度只有50px，那logo就会显示不全；

这时候background-size就发挥其重要的做用了，咱们能够经过对背景图片大小的自适应缩放，而不会影响到起美观性又能所有显示咱们所须要的效果。