解剖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

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

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

二、<length>此值设置具体的值，能够改变背景图片的大小；

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

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

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

当background-size取值为<length>和<percentage>时能够设置两个值，也能够设置一个值，当只取一个值时，第二个值至关于auto，但这里的auto并不会使背景图片的高度保持本身原始高度，而会与第一个值相同。

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

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

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

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

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

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

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

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