如何做透明滚动页面?

[复制链接]
查看11 | 回复0 | 2009-1-30 06:28:38 | 显示全部楼层 |阅读模式
我看到有的博客是透明的特别好看,怎么做呢?

                                                                                                你好!flash 动画透明背景源代码:(网页透明背景动画效果)<DIV><EMBED style="LEFT: 0px; POSITION: absolute; TOP: -200px" align=rightsrc=http://www.52cr.cn/images/fish.swf width=950 height=680 type=application/x-shockwave-flashwmode="transparent" quality="high" ;></EMBED></DIV>代码说明:width=宽度 height=高度 的数值,可自行调节具体操作步骤是:点击控制面板——个人首页维护——自定义空白面板——新增——钩选“显示源代码”前的小方框(出现钩号,同时文档里出现DIV的字样)——复制粘贴上面代码——再次钩选“显示源代码”前的小方框(钩号消失)——保存——返回自定义设置——定制我的首页——添加模块——勾选新增面板——保存设置就行了;注意:此源代码必须插在新增空白面板两组〈〉〈〉中间处。下面是部份比较有效好玩的flash动画代码:http://imgfree.21cn.com/free/flash/138.swf萤火http://oyja.51.net/flash/mhh.swf漂亮的玫瑰花从上飘落http://imgfree.21cn.com/free/flash/131.swf绿色的枫叶飘落http://hlm.nease.net/swf/red/liu.swf柳条http://rycs2004.51.net/images/yeluo.swf无色背景飘落的红叶http://imgfree.21cn.com/free/flash/51.swf三只飞舞的蜻蜓、闪闪的星光http://imgfree.21cn.com/free/flash/103.swf从空中滴落的一个大雨滴http://imgfree.21cn.com/free/flash/49.swf飘落的浅粉色花瓣http://imgfree.21cn.com/free/flash/113.swf粉红色的花瓣飘落http://favorites2003.vicp.net/picture/cl/2.swf玫瑰花http://imgfree.21cn.com/free/flash/33.swf粉黄色5瓣花飘飘http://imgfree.21cn.com/free/flash/59.swf浅兰背景白色大雁飞过http://imgfree.21cn.com/free/flash/107.swf一只大眼睛黄色蝴蝶http://imgfree.21cn.com/free/flash/55.swf两只跳跃的青蛙http://imgfree.21cn.com/free/flash/6.swf灰蓝背景飘落雨滴http://mailimg-fs.hanmail.net/fl/effect/19/e-fall2.swf黄色背景飘舞的红叶http://wanruo.jahee.com/jpsc/flash/53.swf 蒲公英http://www.wanfusi.org/images/movie2.swf小船http://hlm.nease.net/swf/red/cloud.swf淡淡的紫色云飘过http://bbs.flasher123.com/UploadFile/2004-5/200451020535773219.swf白色背景大雁飞过 谢谢您的提问,祝您一切顺利!欢迎光临我的博客http://blog.sina.com.cn/u/1073902787                                       
提问者对答案的评价:

                                                                                                自定义博客各部份图片背景代码: <style type=text/css> body{background:url("页面大背景图片地址") repeat scroll!important;} .logo{background:url("题图上背景图片地址") no repeat no scroll!mportant;}.banner {background:url("题图下背景图片地址") no repeat no scroll!mportant;}.menu {background:url("题图下的菜单背景图片地址") no-repeat center;}.feeds .up {background:url("正文标题栏上翻时的图片地址") no-repeat center;}.feeds .down {background:url("正文标题栏下翻时的图片地址") no-repeat center;}.feeds .function {background:url("正文摘要结尾处菜单的图片地址") no-repeat right;}.links .up {background:url("面板标题栏上翻时的图片地址");}.links .down {background:url("面板标题栏下翻时的图片地址");}.links .mid {background:url("面板的背景图片地址");}.photo .mid {background:url(个人形象照片处的背景图片地址);}.label .mid {background:url("自定义面板的背景图片地址");}.calendar .mid {background:url("日历面板背景图片地址");}.callboard .up {background:url("公告栏标题栏上翻时的图片地址");}.callboard .down {background:url("公告栏标题栏下翻时的图片地址");}.callboard .mid {background:url("公告栏背景图片地址");}.bodyBg {background:url("页面内背景图片地址");}.sysBr500 {background:url("所有文章的背景图片地址,建议不使用这段代码");}.bodyBottom {background:url("内背景页脚处图片地址");}.sysW770 {background:url("页面底部“新浪BLOG意见反馈留言板”等字所在的背景图片地址");} .gbook .up{background:url("留言板标题栏上翻时的图片地址") no-repeat;}.gbook .down {background:url("留言板标题栏下翻时的图片地址") no-repeat;}.feeds .page {background:url("正文文章页数图片地址") no-repeat center;}.links .more {background:url("最新文章列表下的MORE的背景图片") no-repeat right;}.add {background:url("发表文章四个字所在的背景图片") no-repeat right;}.add .ico {background:url("发表文章四个字左边的小图片") no-repeat right;} </style> 代码说明: 1,“页面大背景(body)”:指的是整个博客的最大背景,由于中间部分被覆盖,所以显示的效果只是两边的部分; 2,“题图上背景(logo)”:是指<sina 新浪BLOG [beta3.0]>所在的横长条的背景; 3,“题图下背景(banner)”:是指博客昵名()和博客地址(﹥复制 ﹥收藏本页)所在的那部分背景;其中logo和banner宽各为770,logo高40,banner高135,单位均为像素; 4,“题图下的菜单背景”:是指“HOME ...搜索┆帮助┆退出”等字所在的那个横长条的背景; 5,“正文标题栏上翻时的图片”:指的是文章发表了之后文章标题的图片; 6,“面板标题栏下翻时的图片”:指的是点击标题后出现标题后面的图片; 7,“面板的背景图片”:指的是左边比如“我的最新文章列表”什么的背景图片; 8,“页面内背景(bodybg)”:是指就是除了页面大背景(body)外的另一大背景,由于一些部分被logo和banner还有模块的背景覆盖,所以所看到的只是扣除以上三部分的大背景; 9,“内背景页脚处图片地址(bodyBottom)”:是指在文章翻页处下面,sysW770上面的一横窄条; 10,其它的有些就不需要再说明了,大家自己看了就会明白;修改模板的时候可以灵活运用上面的代码,有些可以不要改,不想改哪项就把哪项的代码删掉就可以了,换句话说,想改哪项取哪项相应的代码即可; 11,但是注意前后的<style type=text/css>和</style>别漏了,否则代码无效; 12,假如不知道这些背景图片的大小,就具体在哪张图片上点击鼠标右键,点“背景另存为”,把图片存到电脑上,然后看大小就可以了; 按装时注意事项: 1,以上这些都是CSS代码,代码不能添加在什么都没有的空白面板里,要不然会没有效果,所以如要添加空白面板的时候,先按个空格键,接着在显示源代码前打勾,再把代码放进去;2,或者可以把代码放在已建的面板里的其他东西的代码后面,比如放在你的时钟代码后面或者天气预报代码后面什么的都可以,建议最好用此方法;3,另外需要补充一点的就是,如果你不需要某项背景,要让其变的透明的话,可以把大括号中的内容去掉,换为 background:#transparent 就可以了;比如我的公告栏不想要背景,想要其变透明的话其代码就是:.callboard .mid{background:#transparent} 当然这只是其中一段,用的时候别忘了用上头尾的<STYLE>和</STYLE>两个代码; 下面是三个背景素材网址: http://www.3lian.com/gif/more/03/0301.html http://liuye.flasher123.com/syzy/wysc/wy.htm http://search.cn.yahoo.com/search?p=%B1%B3%BE%B0%CB%D8%B2%C4&source=toolbar_yassist_button&pid=U_herozh_129663 下面是一组经过选择,加上图片地址的背景代码;请大家与上面总代码对比一下,找出有什么不同,以便给自己更换时作一参考(小括号中的网址即为相应背景图片的网址,格式为jpg或gif): <DIV></DIV><STYLE type=text/css>body {background:url(http://img4.3lian.com/sucai/img4/377/S4-0642.jpg) repeat fixed!important;} .bodyBg{background:url("http://bbs.muwen.com/fileuploaddir/4B277249900.gif");} .bodyBottom{background:url(http://bbs.muwen.com/fileuploaddir/4B277249900.gif);} .feeds .down{background:url("http://fairydoudou824.vip.sina.com/webgif01/l_gg01.gif") no-repeat center;} .banner{background:url(http://www.tianshi163.com/bjsc1h/11.gif) repeat fixed!important;} </STYLE></A><DIV></DIV> 具体操作方法如下: 1,点击控制面板——个人首页维护——自定义空白面板——已有模块(比如时钟模块或天气预报模块什么的)——钩选“显示源代码”——把以上代码复制粘贴在所有原代码后面——去掉钩——保存; 2,如果是新增面板,可以点击控制面板——新增空白面板——钩选显示源代码(出现钩号,同时文档里出现DIV的字样)——代码前面加一个任意字符——粘贴以上代码——钩选显示源代码(钩号消失)——保存新增面板——定制个人首页——选取新增面板——保存设置                                       

                                                                                                这是一个完整的模板,你只要把其中的中文改成你喜欢的图片地址就可以做出个性模板了,绝对棒!<DIV>  </DIV><STYLE type=text/css> .label .top{background:#transparent}.links .bottom {background:#transparent} .photo .top{background:#transparent}.photo .bottom{background:#transparent} .label .bottom{background:#transparent}.label .top{background:#transparent} .logo{background:#transparent} .banner{background:#transparent} .menu{background:#transparent} .feeds .up{background:#transparent} .feeds .down{background:#transparent} .feeds .function{background:#transparent} .links .up{background:#transparent} .links .down{background:#transparent} .links .mid{background:#transparent} .photo .mid{background:#transparent} .label .mid{background:#transparent} .calendar .mid{background:#transparent} .callboard .up{background:#transparent} .callboard .down{background:#transparent} .callboard .mid{background:#transparent} .bodyBg {background:#transparent;filter:progid:DXImageTransform.Microsoft.gradient(GradientType =\'1\',enabled=\'true\',startColorstr=#55FFFFFF, endColorstr=#55FFFFFF);} .bodyBottom{background:#transparent} .sysW770{background:#transparent} .gbook .up{background:#transparent} .gbook .down{background:#transparent} .feeds .page{background:#transparent} .links .more{background:#transparent} .add{background:#transparent} .add .ico{background:#transparent} </STYLE> <STYLE>body {background:url("背景图片地址") Repeat fixed!important;}BODY{CURSOR: url(\'http://webme.bokee.com/inc/mouse024.ani\'); }</STYLE> <DIV>  </DIV><STYLE type=text/css> A {CURSOR: url(\'http://webme.bokee.com/inc/mouse031.ani\'); }</STYLE></DIV><DIV> </DIV> <STYLE type=text/css> .foot{display:none;} </STYLE> <DIV> </DIV> <DIV style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; FILTER: progid:DXImageTransform.Microsoftpadding:8px; ; LEFT: expression(eval(document.body.scrollLeft)+eval(document.body.clientWidth)-980); BORDER-LEFT: medium none; BORDER-BOTTOM: medium none; POSITION: absolute; ; TOP: expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-500); TEXT-ALIGN: center"> <TABLE cellSpacing=0 cellPadding=0 align=center border=0><TBODY><TR> <TD><EMBED style="LEFT: 0px; POSITION: absolute; TOP: -200px" align=right type=application/x-shockwave-flash wmode="transparent" quality="high" ;></EMBED></TD></TR></TBODY></TABLE></DIV> <DIV></DIV><DIV> </DIV> <STYLE type=text/css> .logo{display:none;} </STYLE> <DIV></DIV><DIV></DIV><DIV></DIV> <DIV> </DIV><STYLE type=text/css> A { text-decoration: NONE; color: #51bfe0} A:hover { color: #3399FF }</STYLE> <DIV> </DIV><STYLE type=text/css> A { text-decoration: NONE; color: #51bfe0} A:hover { position: relative; left:1px; top:1px; } </STYLE><DIV> </DIV><STYLE type=text/css> .banner .title td{font-size:36px;} .banner .title td{FILTER: glow(color=#000000,direction=2);} .banner .title td{color: #ff9900;} .banner table{background:#transparent;filter:alpha(opacity=85);border:0px solid #000;} </STYLE><STYLE>.bodyTop {display:none;} </STYLE> <STYLE type=text/css> .menu a{color: #000000;} .menu .text{color: #000000;} .menu .text a{color: #000000;} .menu .home a{color: #000000;} .links .text{color: #000000;} .callboard .title{color: #000000;} .links .desc{color: #000000;} .feeds .text{color: #000000;} .links td a{color: #000000;} .feeds .title a{color: #000000;} .feeds .time{color: #000000;} .banner .link a{color: #000000;} .banner .link td{color: #000000;} .photo .infoText a{color: #000000;} .feeds .function a{color: #000000;} .feeds .page a{color: #000000;} .feeds .page span{color: #000000;} .add a{color: #000000;} .foot p a,.foot center a{color: #000000;} .foot{color: #000000;} .feeds .text a {color: #000000;} </STYLE> <STYLE type=text/css>.banner {background:url("横幅图片地址") no repeat no scroll!mportant;}</STYLE>添加步骤: 第一步、登录新浪博客,输入“登录名”“密码”和“验证码”后点击“登录”。 第二步、点击进入主页上方的“控制面板”。 第三步、进入“个人首页维护”。 第四步、进入“自定义空白模板”。 第五步、点击“新增”新增一个空白面板。 第六步、在“面板标题”写好面板的名称,勾选面板下方的“显示源代码”勾选框,此处注意一定要勾选,否则将不能成功。将以下代码贴入文本框中,点击“保存”。 第七步、点击“控制面板”左侧“BLOG信息设置”中的“定制我的首页”。 第八步、点击“添加模块”。 第九步、勾选刚刚建立好的面板,点击下方的“选取”。 第十步、刚刚建好的显示面板出现,点击“保存设置”。注意:只改中文字的地方.两侧的引号不要少
横幅图片的大小要掌握好参考文献:http://blog.sina.com.cn/ouheziluolan
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

主题

0

回帖

4882万

积分

论坛元老

Rank: 8Rank: 8

积分
48824836
热门排行