css實現響應式全屏背景

標籤：

利用css中 background-size：cover  填充整個viewport

注意：

       一張背景映像素5000px*5000px在pc端 縮放都基本滿足要求 不會出現模糊失真；

       但是在移動端使用如此大的圖片完全是浪費資源，大圖會導致載入變慢，尤其是在移動網路下。

在移動端可以另設一張相對小一點的圖片使用媒體查詢

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;}    

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

 

　　

 

css實現響應式全屏背景