基于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://www.w2bc.com/Article/40891
原标题:基于html5背景图片自适应代码
关键词:HTML