解剖css3的background-size属性

在我们做项目过程中，可能会遇到一个问题，就是给个背景图的尺寸大小是一样的，可是屏幕大小却有很多种。

比如app前面的几个引导页，你收到的是固定大小尺寸的照片，怎么让这个屏幕可以跟背景图片相适应呢？

有一些解决方案是，根据不同的屏幕大小做不同的照片尺寸，可是这样添加了设计师的工作量，又要加载很多图片，性能变差了不说，还加多了工作量。

有人说那把图片压缩啊，或者用css sprite 拼合成一张图片然后根据background-position设置背景的位置。

可是这些对我来说：“hao gui ma fan”哦

这时我就想到之前用过css3的一个新属性，就是可以使图片布满整个屏幕，就是“background-size”:"cover";

然后我就用了，可是我的图片，在不同屏幕显示不同的尺寸，我要显示的内容跑到屏幕外了，之后我就查了background-size的具体用法

在google的时候,看到了一篇background-size说的挺好的一篇文章，http://www.w3cplus.com/content/css3-background-size

  background-size: auto || <length> || <percentage> || cover || contain

然后出现了下面的取值说明：

1、auto:此值为默认值，保持背景图片的原始高度和宽度；

2、此值设置具体的值，可以改变背景图片的大小；

3、此值为百分值，可以是0％〜100％之间任何值，但此值只能应用在块元素上，所设置百分值将使用背景图片大小根据所在元素的宽度的百分比来计算。

4、cover：此值是将图片放大，以适合铺满整个容器，这个主要运用在，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真；

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

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

看完之后，我就把每个值都试了一遍，可是不对哦，每个属性都不是我要的。

后来认真解析一遍，发现其实每个属性都有自己的结果，具体解释看上面。这时不如直接获取屏幕的宽度和高度，（因为我写的页面是用js写的）

这时果断用了var wid_height=$(window).height();来获取屏幕的高，

然后呢，在传入页面时，在写app页面时，就已经将width设置为“：@app width 1”,就是屏幕的宽度，至于为什么这么写，这是框架封装出来的， 就不要想那么多了。

然后在设置的时候就以“background-size”:"100%"+win_height;来传入。（这里用的方法就是“background-size”:" "）

测试一下，大功告成。很开心，用最简单的方法将问题解决了，界面又好看。

总结一下，首先就是有一点基础，所以知道用什么，之后呢，google是一个好帮手，但是google来的东西毕竟是其他人的，你要善于理解其本质并加以运用，最后还要结合你当前所处的环境，才能最终解决你所遇到的问题。

好了，不啰嗦那么多，旁边的程序猿又说我在装逼了，其实我只是想把自己用最好的、简单的方法将复杂的问题解决，这个思想传递下去。