你的位置:首页 > 网页设计

[网页设计]基于html5背景图片自适应代码


基于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