css怎樣讓背景充滿整個螢幕
阿新 • • 發佈：2019-02-08
<html>
<body>
...Your content goes here...
</body>
</html>
給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。
其實，該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的，那麼背景圖將自動伸縮，充滿整個容器。
CSS body標籤的樣式如下：
body {
/* 載入背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時，背景影象的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設定背景顏色，背景圖載入過程中會顯示背景色 */
background-color: #464646;
}
上面最重要的一條就是：
background-size: cover;
這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高（在上面的例子中，就是body標籤）。
這裡需要注意的一點就是：如果背景圖小於body標籤的尺寸（例如在高解析度顯示器上，或頁面內容特別多時），瀏覽器會拉伸圖片。都知道，當把一個圖片拉伸時，圖片會變模糊。
因此，在選擇背景圖時，要特別注意尺寸。為了照顧到大尺寸螢幕，demo裡用的圖片尺寸為5498px * 3615px 。
同時，為了讓背景圖始終相對於viewport居中，聲明瞭：
background-position: center center;
上面的規則會把背景圖縮放的原點定位到viewport的中心。
接下來需要解決的問題是：當內容的高度大於viewport的高度時，會出現滾動條。希望背景圖始終相對於viewport固定，即使使用者滾動時也是一樣。
解決辦法就是：
background-attachment: fixed;
<body>
...Your content goes here...
</body>
</html>
給body標籤指定背景圖，這樣背景圖就可以填充整個瀏覽器viewport了。
其實，該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態的，那麼背景圖將自動伸縮，充滿整個容器。
CSS body標籤的樣式如下：
body {
/* 載入背景圖 */
background-image: url(images/background-photo.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大於圖片高度時，背景影象的位置相對於viewport固定 */
background-attachment: fixed;
/* 讓背景圖基於容器大小伸縮 */
background-size: cover;
/* 設定背景顏色，背景圖載入過程中會顯示背景色 */
background-color: #464646;
}
上面最重要的一條就是：
background-size: cover;
這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高（在上面的例子中，就是body標籤）。
這裡需要注意的一點就是：如果背景圖小於body標籤的尺寸（例如在高解析度顯示器上，或頁面內容特別多時），瀏覽器會拉伸圖片。都知道，當把一個圖片拉伸時，圖片會變模糊。
因此，在選擇背景圖時，要特別注意尺寸。為了照顧到大尺寸螢幕，demo裡用的圖片尺寸為5498px * 3615px 。
同時，為了讓背景圖始終相對於viewport居中，聲明瞭：
background-position: center center;
上面的規則會把背景圖縮放的原點定位到viewport的中心。
接下來需要解決的問題是：當內容的高度大於viewport的高度時，會出現滾動條。希望背景圖始終相對於viewport固定，即使使用者滾動時也是一樣。
解決辦法就是：
background-attachment: fixed;