基于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
时间: 2024-11-07 03:54:37