背景图片 这是从的设计作品中看到的,先来来看看这个!
原理根据两幅重叠的图片相对位置的不同组合成一幅完整的图片,滚动条的滚动就是控制这个组合。有点像电子显示牌利用矩阵点显示文字或图片。下面是这两张图片
主背景图片
黑色条纹图片,就是利用它的黑色横向纹理与主背景图片的重叠,产生背景图片的改变。
<div id="intro"></div>
<div id="orderBg"><span></span></div> body { margin: 0px; padding: 0px; background-image: url(orange_zensmall.gif);background-repeat:no-repeat; background-attachment: fixed; background-color: #FF6600;background-position: 0px 14px;}
#orderBg { background-image: url(1px_grid_blk.gif); height: 2400px; width: 100%;background-attachment: scroll; background-repeat: repeat; top: 0px; position: absolute; z-index: 0; left: 0px;}
随滚动条滚动改变的背景图片
80酷酷网 80kuku.com