溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下如何使用CSS實現響應式全屏背景圖，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
使用background-size 屬性，填充整個viewport.
當css屬性background-size 值為cover時，瀏覽器會自動按比例縮放背景圖的寬和高，直到大于或等于viewport的寬和高.
使用媒體查詢為移動設備提供更小尺寸的背景圖
為什么要給移動設備提供小尺寸背景圖呢？在demo中，我們看到的背景圖的實際尺寸為5498px * 3615px，使用這么大尺寸圖片的目的是滿足絕大多數寬屏顯示器，并且不會顯示模糊，而代價就是1.7MB的圖片體積。
但是在移動設備上沒有必要使用這么大的圖片，同時大圖還會導致加載變慢，尤其是在移動網絡下。
需要說明的是：為移動設備提供小背景圖對該技術方案來說是可選的。
實踐
HTML
<!doctype html>
<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;
(可選)使用媒體查詢應對小屏幕
為了應對小屏幕，我用photoshop將背景圖按比例縮放到768px * 505px，然后通過smush.it 壓縮圖片體積。這樣就將圖片體積從1741KB降到114KB，節省了93%。
下面是媒體查詢的寫法：
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
}
上面的媒體查詢將max-width: 767px 設為斷點，也就是說當瀏覽器viewport大于767px時，會使用大背景圖，反之使用小背景圖。
使用上面媒體查詢不利的一面是，如果你把瀏覽器窗口從1200px縮小到640px(反之亦然)，你會看到一個短暫的閃爍，因為小背景圖或大背景圖正在加載。
看完了這篇文章，相信你對“如何使用CSS實現響應式全屏背景圖”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
