CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

浏览数：53 / 时间：2015年06月09日

技术的新发展，除计算机可以接入互联网之外，平板电脑、智能手机、智能电视等其他设备均可访问互联网。在多设备时代，构建多屏体验也不是听说的那么难。但是这也增加了学习CSS的难度？不知道如何上手，只懂一点基础的CSS语法，在移动互联时代，难道我们就这样落伍了？？好好学习吧，看完《CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation》，给自己的未来打气！

5.1 设定背景图的大小

在CSS 3出现之前，背景图片的尺寸是由图片的实际尺寸决定的。如果同样的图片要在多个不同的地方作为背景的话，就必须用制图工具做成不同的尺寸，这一方面加大了开发者的工作量，另一方面也占用了更多的磁盘空间和网络空间。在CSS 3中，开发者可以使用background-size属性来规定背景图片的尺寸，这就可以在不同的环境中重复使用背景图片了。例如下面的代码：

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

最基本的用法当然是直接使用长度单位或者百分比来指定背景的尺寸，其中第1个值是宽度，第2个值是高度。如果只设置一个值，则高度默认是auto。

background-size还有两个可选项：cover和contain。这两个选项都不会造成图像比例失真。其中cover相当于宽度等于元素宽度、高度设为auto的情况；而contain则相当于高度等于元素高度、宽度设为auto的情况，下面举例说明。

首先，先设置一个高度和宽度均为300像素的容器，然后将一张1600?×?1200尺寸的图片设置为图片的背景：

<style>
.container{
  background:url(naicha.jpg) no-repeat;
  border: 2px solid black;
  margin:auto;
  width:300px;
  height:300px;
}
</style>
<div class="container"></div>

效果如图5.1所示，由于背景取决于背景图片的尺寸，但背景图片太大，导致实际只显示了原图的左上角的部分。

图5.1 原始图片背景

下一步加上background-size，效果如图5.2所示。

<style>
.container{
  background:url(naicha.jpg) no-repeat;
  background-size: 100% auto;    /*设置宽度100%，高度自动*/
  /*使用background-size: 100% auto; 等效于使用background-size: contain; */
  -webkit-background-size: 100% auto;
  border: 2px solid black;
  margin:auto;
  width:300px;
  height:300px;
}
</style>
<div class="container"></div>

现在读者可以发现图片的全貌展现出来了，宽度等于容器宽度，高度则根据原图比例生成，最终得到和原图比例一致的背景图片，使用background-size: contain;等效于使用background-size: 100% auto;。

如果想占满容器的高度，则只需设置background-size: auto 100%;或者background-size: cover;即可，效果如图5.3所示。