基于html5背景图片自适应代码
生活随笔
收集整理的這篇文章主要介紹了
基于html5背景图片自适应代码
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
基于html5背景圖片自適應(yīng)代碼是一款背景不隨滾動(dòng)條滾動(dòng)，會(huì)根據(jù)分辨率不同自動(dòng)匹配對(duì)應(yīng)的背景圖片。效果圖如下：
在線預(yù)覽????源碼下載
實(shí)現(xiàn)的代碼。
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
轉(zhuǎn)載于:https://www.cnblogs.com/liaohuolin/p/4535913.html
總結(jié)
以上是生活随笔為你收集整理的基于html5背景图片自适应代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
