09/1
2015
刚才看到本站页面中，body的background-size是cover。这个值只是以前看到过，没了解过，于是百度了一下：
cover值会保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。
于是我产生了一个疑惑，cover和100%有哪些区别呢？实验一番之后明白了。
注意，background-size:100%;和background-size:100% 100%;是不同的，本文讨论的是只写一个100的情况，形同background-size:100% auto;。
先看100% auto的效果：
可以看到100% auto并不是把图片的宽高都缩放到区域的100%，而是以宽度为基准（因为100% auto只指定了宽度是100%）进行等比例缩放。如果图片宽度缩放到了区域的100%就不再继续调整了，这时候高度是否铺满、是否超出或不足，就听天由命了。是否平铺取决于background-repeat的设置。
再看cover的效果：
可以看到背景图相比于100% auto时放大了许多，此时背景完全铺满了页面，没有产生平铺；但是有一部分跑到区域外面了。
cover的高明之处就在于没有限制以宽度还是高度作为缩放基准。先把图片等比例缩放，在窄的那一边达到了区域的100%之后，如果另一个边没有达到100%，就继续等比例缩放，直到另一边达到100%。，这样可以保证图片完全覆盖区域，而且无需平铺。但这样可能会造成图片的一部分在区域之外，变得不可见了。
