纯css写,利用background-attchment:fixed的特点
首先看看实现的效果
易拉罐随之滚动条的滚动而变化;
用到的图片:
HTML代码
<!-- 第一个盒子用来展示窗口 -->
<div class="box">
<!-- 第二个盒子和第三个盒子用来掩盖第一个盒子的背景 -->
<div class="sbox"></div>
<img src="img/coke_can.png">
<div class="sbox1"></div>
</div>
css代码:
<style>
.box{
width: 600px;
height: 400px;
//设置视口的宽高
border: 1px solid;
//添加上可乐罐子的背景图片,使其固定在视口中,可随着滚动条的滚动而变化
background: url(img/coke_bg.jpg);
background-attachment: fixed;
//调整好背景图与罐子的位置,让其刚好覆盖在罐子上
background-position: 0px 18px;
//背景图片x轴平铺重复
background-repeat:repeat-x;
overflow-x: scroll;
position: relative;
}
.sbox{
width:300px;
//设置一个宽度,并使其背景颜色为白色(遮盖住.box的背景)
height: 340px;
position: absolute;
left:582px;
background-color: #fff;
}
.sbox1{
width:388px;
//设置一个宽度,并使其背景颜色为白色(遮盖住.box的背景)
height: 340px;
position: absolute;
background-color: #fff;
}
img{
position: absolute;
left:388px;
}
//.sbox .sbox1 img 三者的宽度大于视口盒子的宽度,出现滚动条,微调图片的位置和两个空白
盒子的位置,保证三者不会出现缝隙,漏出.box的背景。
</style>