基于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) {html滚动效果代码
#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：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。