你有沒有遇到過一種情況，你特別喜歡一張圖片，可是可惜的是這張圖片就小了那麽一丁點。但有小片留白啊，那就不好看了啊。你有沒有過呢，我不知道，但我真的就碰到了。我特喜歡那張圖，就想讓它做背景，可就小了點。於是我就想辦法了。

background-size：cover；

background-size：contain。

兩個看起來幾乎相同，實際原理還真不一樣：

cover。翻譯過來就是“覆蓋”，這是純正的背景鋪滿了元素，它會比較圖片的長和寬。哪一個比較小，它就以哪一個為基準進行擴大。圖片的本身寬高比例是不變的，當增大到比較小的值鋪滿對應方向的屏幕了才截止；

contain：翻譯過來是“包括”，這個是說整個背景都在頁面內，一般圖片過大了才會用。跟size同樣的是，本身的寬高比是不變的。而不用的則是它取的是兩者中比較大的一個，以其為基準進行縮小。小到比較大的一方進入屏幕才截止；

當然在ie下，還有這經典的濾鏡，這個暫沒試用。我就分享下別人寫的代碼吧。

filter: progid:DXImageTransform
.Microsoft.AlphaImageLoader
(src=‘.myBackground.jpg‘, 
sizingMethod=‘scale‘);

背景圖片鋪滿屏幕-------Day85