CSS實現響應式全螢幕背景圖-css教學-PHP中文網

CSS實現響應式全螢幕背景圖

巴扎黑

發布： 2017-05-27 17:24:36

原創

2563 人瀏覽過

CSS實現響應式全螢幕背景圖

　　目前很流行的一種網頁形式就是滿屏大圖，本文將以最簡單的方式實現該效果。用到了CSS 屬性background-size ,無需javascript。

　　核心概念

　　使用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 {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);

/* 背景图垂直、水平均居中 */
background-position: center center;

/* 背景图不平铺 */
background-repeat: no-repeat;

/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed;

/* 让背景图基于容器大小伸缩 */
background-size: cover;

/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #**46;
}

登入後複製

　　後面我們會為body標籤指定背景圖，這樣背景圖就可以填滿整個瀏覽器viewport了。
　　其實，該方案對所有的區塊級容器都可以生效。如果你的區塊級容器的寬高是動態的，那麼背景圖將自動伸縮，充滿整個容器。

　　CSS body標籤的樣式如下：

background-size: cover;

登入後複製

　　上面最重要的一條就是：

background-position: center center;

登入後複製

　　這樣瀏覽器就會按比例縮放背景圖直至背景圖寬高不小於容器的寬高(在上面的例子中，就是body標籤)。

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

　　因此，在選擇背景圖時，要特別注意尺寸。為了照顧到大尺寸螢幕，demo裡用的圖片尺寸為5498px * 3615px 。

　　同時，為了讓背景圖總是相對於viewport居中，我們宣告了：

background-attachment: fixed;

登入後複製

　　上面的規則會把背景圖縮放的原點定位到viewport的中心。

　　接下來我們需要解決的問題是：當內容的高度大於viewport的高度時，就會出現捲軸。我們希望背景圖始終相對於viewport固定，即使用戶滾動時也是一樣。　　解決方法是：

@media only screen and (max-width: 767px) {
  body {
    background-image: url(images/background-photo-mobile-devices.jpg);
  }
}

登入後複製

# 　(可選)使用媒體查詢應對小螢幕

####################################################### #　　為了應對小螢幕，我用photoshop將背景圖按比例縮放到768px * 505px，然後透過smush.it 壓縮圖片體積。這樣就將圖片體積從1741KB降到114KB，節省了93%。 ######　　以下是媒體查詢的寫法：###rrreee###　　上面的媒體查詢將max-width: 767px 設為斷點，也就是說當瀏覽器viewport大於767px時，會使用大背景圖，反之使用小背景圖。 ######　　使用上面媒體查詢不利的一面是，如果你把瀏覽器視窗從1200px縮小到640px(反之亦然)，你會看到一個短暫的閃爍，因為小背景圖或大背景圖正在載入. ###
以上是CSS實現響應式全螢幕背景圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！