随滚动条滚动改变的背景图片

80酷酷网    80kuku.com

  背景图片 这是从的设计作品中看到的,先来来看看这个!

原理根据两幅重叠的图片相对位置的不同组合成一幅完整的图片,滚动条的滚动就是控制这个组合。有点像电子显示牌利用矩阵点显示文字或图片。下面是这两张图片

主背景图片


黑色条纹图片,就是利用它的黑色横向纹理与主背景图片的重叠,产生背景图片的改变。

<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;}

分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: