html+CSS讓背景圖片充滿整個螢幕
阿新 • • 發佈：2019-01-26
由於給網頁設定背景圖時，需要設定背景圖不重複且充滿整個瀏覽器螢幕。
給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。
其實，該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的，那麼背景圖將自動伸縮，充滿整個容器。
可設定body標籤的CSS樣式如下：
body{
/*載入背景圖*/
background-image：url（./images/background.jpg）;
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時，背景影象的位置相對於viewport固定 */
background-attachment: fixed; //此條屬性必須設定否則可能無效/
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設定背景顏色，背景圖載入過程中會顯示背景色 */
background-color: #CCCCCC;
}
或簡寫為如下CSS樣式：
body{
background:url(./images/background.jpg) no-repeat center center;
background-size:cover;
background-attachment:fixed;
background-color:#CCCCCC;
}