背景图片
这是从csszengarden的设计作品Fun with backgrounds orange by anthony forsey中看到的,先来来看看这个非常有创意的效果!
原理根据两幅重叠的图片相对位置的不同组合成一幅完整的图片,滚动条的滚动就是控制这个组合。有点像电子显示牌利用矩阵点显示文字或图片。下面是这两张图片
主背景图片
黑色条纹图片,就是利用它的黑色横向纹理与主背景图片的重叠,产生背景图片的改变。
XHTML<div id="intro"></div>
<div id="orderBg"><span></span></div>CSS 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;}
时间: 2024-11-01 11:01:35