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

背景图片

 这是从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

随滚动条滚动改变的背景图片的相关文章

点击图片从而改变网页背景图片

校内网css代码添加背景图片常用代码_经验交流

序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(URL)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {background-attachment:fixed|scroll} 5 背景定位 {background-position:数值|top|bottom|left|rig

html-CSS中背景图片不随文字的大小而改变,怎么办?

问题描述 CSS中背景图片不随文字的大小而改变,怎么办? 解决方案 vjia中设置一下高度和宽度,这样li就不会自动缩放了,背景也就固定了,让文字居中,可以设置line-height 解决方案二: 另外背景铺满容器,background-size:100% 解决方案三: 单独设置图片的属性, 解决方案四: 去掉background-size,要不会依据容器大小变换,而且css bs ie8-不支持. 解决方案五: 有几个CSS的属性要提一下:background-size:cover,这个CSS

Word如何改变背景图片

  Word如何改变背景图片 步骤 1.不管是WPS还是WPS表格改变背景的方式都是一样的,现在先以WPS作为演示案例,打开WPS文档,在左边最上方我们将看到"WPS文字"点击后面的小按钮,即可出现下拉列表. 2.在"WPS"下拉列表中选择"格式",然后在"格式"右侧也会出现相应的子栏目,此时我们选择靠下方的"背景",操作流程,如图所示. 3.点击选择"背景",右侧也同样会出现子栏目,选

js实现点击图片改变页面背景图的方法

 这篇文章主要介绍了js实现点击图片改变页面背景图的方法,实例分析了javascript操作css与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js实现点击图片改变页面背景图的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <html> <head> <title>点击图片即改变页面的背景图片</title> </head> <body bgcolor="#FFFFFF"

背景图片-C#能不能改变生成的二维码的背景

问题描述 C#能不能改变生成的二维码的背景 我使用C#生成了二维码,将这个二维码显示在我的窗体上,但是我现在这个窗体有一个自己额背景图片,生成的二维码是白底黑字的,我想让它的白底变成我这个窗体的背景 图片,这个应该怎么实现呢? 解决方案 可以,可以绘制后将白色改成透明色,然后再alpha blend

new-有时间方便帮我看看java如何点击改变Label或JPanel背景图片么

问题描述 有时间方便帮我看看java如何点击改变Label或JPanel背景图片么 我想通过点击一个单选按钮事件,然后更改左上角框框的背景图片,如和重绘,大神方便看看嘛,谢谢 import java.awt.Button; import java.awt.Frame; import java.awt.Graphics; import java.awt.Image; import java.awt.Label; import java.awt.Panel; import java.awt.Text

java 中何使面板中的背景图片随面面变大变而改变

问题描述 请问各位java高手java中何使面板中的背景图片随面面变大变而改变???在此我表示感谢! 解决方案 解决方案二:一般的解决方法是在背景图片的属性里找到Anchor的属性,将里面的四个都选上就可以了.解决方案三:大哥,能不能给我讲具体点呀?我是新手,有些东西不那么明白!

c#窗体背景图片-C#设置窗体背景图片,并让背景图片每隔五秒改变一次

问题描述 C#设置窗体背景图片,并让背景图片每隔五秒改变一次 怎么用C#设置Windows窗体的背景图片,并且让背景图片隔五秒变一次 解决方案 在你的窗体不属于任何方法的地方写: private int im = 0; 新建一个ImageList控件,添加4个图片. 新建一个定时器,设置interval=5000,enabled=true在tick里面写: this.BackgroundImage = ImageList1.Images[im++ % 4];