CSS之全屏背景圖

標籤：

吐槽啦：Yeah  明天就是國慶了！哈哈，提前祝福各位園友國慶快樂、假期愉快、生活美滿、天天開心！國慶我要回家一趟，把一些不用的東西帶回家，走訪一下親朋好友，在家打幾天醬油~~~

言歸正傳，我們回到我們的主題來看看CSS之全屏背景圖。Nowdays，滿屏大圖的網頁成為了一種fashion，網頁的模板、布局是用CSS、HTML……來設計的，這裡就以CSS來聊全拼背景圖。

簡單點，對於全屏背景圖，我們只需用CSS的一個background-size屬性就可以了。

當background-size的值為cover時，瀏覽器會自動按比例縮放背景圖的寬和高，直到大於或等於viewport的寬和高。

body {/* 載入背景圖 */background-image: url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);/* 背景圖垂直、水平均置中 */background-position: center center;/* 背景圖不平鋪 */background-repeat: no-repeat;/* 當內容高度大於圖片高度時，背景映像的位置相對於viewport固定 */background-attachment: fixed;/* 讓背景圖基於容器大小伸縮 */background-size: cover;/* 設定背景顏色，背景圖載入過程中會顯示背景色 */background-color: #FF0000;}

在這裡需要注意的一點就是：如果背景圖小於body標籤的尺寸（例如在高解析度顯示器上，或頁面內容特別多時），瀏覽器會展開圖片。我們都知道，當把一個圖片展開時，圖片會變模糊。

因此，在選擇背景圖時，要特別注意尺寸。

還有一個問題就是在其他媒體裝置上查看，在不同的螢幕上查看是不一樣的，所以我們要將max-width: 600px設為斷點，也就是說當瀏覽器viewport大於600px時，會使用大背景圖，反之使用小背景圖。下面是媒體查詢方法：

@media only screen and (max-width: 600px) {  body {    background-image: url(http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_5_11911_8.jpg);}}

CSS之全屏背景圖