認識CSS3中的背景

前端之HTML5，CSS3（七）

 　　背景縮放

　　CSS3中背景用於手機端須要分系統：ios系統和android系統。對於iso系統，須要背景是2倍寬高像素的背景圖，而後背景縮放，如此在ios系統中打開纔會不致使圖片失真。簡單來講，就是ios系統自帶背景放大功能，當設置背景爲原圖大小時，ios系統打開會對背景圖片進行2倍放大，然而通常像素放大會產生失真效果，即模糊效果。所以，須要對背景先縮小，再經過ios系統打開，即爲原圖大小。

　　background-size屬性

　　經過background-size屬性設置背景圖片大小，如同HTML中img經過css設置width和height通常。屬性值：長度(px)或者百分比，cover，contain。

　　長度或者百分比：設置長度或者百分比時，background-size設置兩個值，分別爲寬(width)和高(height)，基本語法爲background-size: mpx npx，其中m爲寬，n爲高。此外，設置百分比屬性須要根據容納背景的盒子來做爲參照，如background-size: 50% 100%，表示背景圖片設置寬度爲盒子寬度的一半，高度與盒子高度相同。注意，當background-size只設定一個屬性值時，另外一個缺省值爲auto，表示按照設定值與原始背景圖片尺寸大小比例進行等比例縮放。

　　cover：設置方式爲background-size: cover；表示背景圖片的寬和高會按照相同比例一直縮放，直到寬和高都鋪滿整個背景盒子爲止。若是寬先於高鋪滿整個背景盒子，寬仍舊會繼續縮放，直到高鋪滿整個盒子的高度時，寬和高同時中止縮放，背景圖片的寬會溢出盒子，而溢出盒子的部分會自動隱藏。反之，高先於寬時，亦是如此。

　　contain：設置方式爲background-size: contain；表示背景圖片的寬和高也會按照相同比例一直縮放，直到寬或者高中的一個鋪滿盒子爲止。若是高先於寬鋪滿盒子，則當高鋪滿盒子的時候，寬和高同時中止縮放。反之，寬先於高時，亦是如此。