css background 背景

通过CSSbackground-size属性设置图片的尺寸，这样一来可以在不使用图片处理工具的情况下下，任意缩放背景图的大小。

语法

background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || contain(缩小铺满)

属性值

属性值说明例子
auto此值为默认值，保持背景图片的原始高度和宽度;

number此值设置具体的值，可以改变背景图片的大小;
background-size ：100px 100px;  调整图片到指定大小100*100；
percentage此值为百分值，可以是0%〜100%之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。
background-size ：50% 100%; 调整图片到指定大小，其中图片的宽度缩小为50%，高度平铺。
cover此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真;

contain此值刚好与cover相反，其主要是将背景图片缩小，以适合铺满整个容器，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真。


当background-size取值为number和percentage时可以设置两个值，也可以设置一个值，当只取一个值时，第二个值相当于auto，但这里的auto并不会使背景图片的高度保持自己原始高度，而会与第一个值相同。

例子

 <!DOCTYPE html>
<html>
<title>css background-size属性例子</title>
<head>
<style>
	div{
		background-color:gray;
		text-align:center;	
		float:left;
		margin-left:10px;
		margin-top:10px;
		color:#fff;
		width:300px;
		height:200px;
		background-repeat: no-repeat;
	        background-image: url(/static/default/yxjc/css/good-morning.jpg);
	}
	.div1{
		background-size：100px 100px;
	}
	.div2{
		background-size: 50% 100%;
	}
	.div3{
		background-size: cover;
    }
	.div4{
		background-size: contain;
    }
</style>
</head>
<body>
<div class="div1">
	指定大小100*100
</div>
<div class="div2">
	指定大小宽度50%
</div>

<div class="div3">
	放大填充整个容器 cover
</div>
<div class="div4" style="width:150px;height:150px;">
	缩小填充整个容器 contain
</div>
</body>
</html>
输出截图如下：

CSS background-size 设置图片的尺寸