基于html5背景圖片自適應代碼是一款背景不隨滾動條滾動，會根據分辨率不同自動匹配對應的背景圖片。效果圖如下：

在線預覽????源碼下載

實現的代碼。

css代碼：

.jawbone-hero .jawbone-hero-image {position:absolute;background:transparent none no-repeat scroll 50% 0;background-size:cover;top:0;bottom:0;left:0;right:0;width:100%;margin:0 auto;z-index:-1 } .jawbone-hero {height:100%;min-height:550px } .jawbone-hero .jawbone-hero-image {position:fixed } #h1.jawbone-takeover-minimulti .jawbone-hero-image {background-image:url(../images/hero-600.jpg) } @media (min-width: 600px) {#h1.jawbone-takeover-minimulti .jawbone-hero-image {background-image:url(../images/hero-1280.jpg) } }@media (min-width: 1016px) {#h1.jawbone-takeover-minimulti .jawbone-hero-image {background-image:url(../images/hero-2000.jpg) }

via：http://***/Article/40891

轉載于:https://www.cnblogs.com/liaohuolin/p/4535913.html

總結

以上是生活随笔為你收集整理的基于html5背景图片自适应代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。