博客首页
个人随笔
博客模板
图文日志
影音地带
代码收藏
常用软件
日志列表
播客视频
150M万网ASP空间特售,万网虚拟主机
120.0元
Kingston 金士顿 U盘 逸盘 8G 8GB 800防伪
130.0元
本本美容专家店※DIY笔记本电脑美容商城
权证趋势-权证分时看盘好帮手,包含主图附图两指标
站内搜索
赞助商广告
最新发表
三步找回被删并清空回收站的文件
对局域网用户的限制技术和反限制技巧(转)
无线上网常见问题及解决办法
两个开关控制一个灯泡三种接法
Win XP优化精髓
避免盗版系统10月20号后出现黑屏的方法
微软20号将对中国盗版用户启动1小时黑屏1次反盗版验证
电脑配件最新报价实时查询器
简单设置修改候选网站资源线程加速迅雷下载
注册表六大根键的作用
常用系统进程列表
删除C盘无用文件加快电脑速度
XP无法停止‘通用卷’的解决方法合集
XP系统安装常识
婚前婚后
Windows卸载顽固程序技巧
节省内存方法
xp系统死机也个性
最新评论
全集在线观看
Re:几十款非常漂亮的QQ空间留言板图片
Re:如何对付局域网内的疯狂下载者
Re:TM2007 Beta1 版显IP外挂
Re:瑞星杀毒2008下载版激活码
Re:广东台山端芬交警杀人事件
Re:广东台山端芬交警杀人事件
Re:瑞星杀毒2008下载版激活码
Re:我以前用的北方博客模板给大家共享共享
Re:几十款非常漂亮的QQ空间留言板图片
Re:无线上网常见问题及解决办法
Re:瑞星杀毒2008下载版激活码
Re:广东台山端芬交警杀人事件
Re:SEO工具汇总
Re:SEO人员十大必备工具之搜索引擎蜘蛛(抓取器)模拟器
Re:婚前婚后
Re:瑞星杀毒2008下载版激活码
索要视频
Re:QQ空间人气精灵 V3.95 正式版
Re:Pro/E Wildfire野火版 4.0,3.0 全系列许可证生成器
网友留言
<写留言>
瑞星杀毒
迟的祝福
中秋快乐
问好
不懂啊
清晰
应该还有吧...
你还有生活的保障吗
你还有生活的保障吗
好青菜啊
图片...
考哥
模板不修改了
音乐压缩软件
想法~~
回复拉拉
酷噢~~
端午节快乐
问题解决了
博客问题
友情链接
妹妹的Blog
音乐收藏
播客视频
软件收藏①
软件收藏②
幽谷白云
娱乐迅雷网
中文博客群
飞豆网
订阅博客
订阅本博客:
QQ群: 35306281
书签收藏
收藏到QQ书签 Google收藏
百度搜藏 Yahoo收藏
Del.icio.us 收藏到新浪ViVi
收藏到365Key 天极收藏
收藏到我摘 收藏到POCO
博采收藏 收藏到和讯
天天收藏 收藏到igooi
历史存档
2008年11月(4)
2008年10月(5)
2008年09月(18)
2008年08月(22)
2008年07月(43)
2008年06月(59)
2008年05月(101)
2008年04月(107)
2008年03月(63)
2008年02月(43)
2008年01月(23)
2007年12月(27)
2007年11月(23)
信息统计
日志总数:538
今日访问:1529
访问总数:719353
评论总数:457
留言总数:70
管理登陆
用户名
密 码
[代码收藏]用CSS来控制网页背景
Tags: 控制 网页 背景 css

背景也就只有背景颜色和颜色图片,这两个我想大家一定都知道在里加入bgcolor="#808080"和background="URL"对吧,可是我这里将要介绍不是这样做的,而是用CSS样式来做的,虽说有些麻烦,可是整体配合还是非常不错的。

·背景颜色 background-color
我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是transparent(透明色)。
例:body{background-color:yellow}
H1{background-color:#000000}

·背景图片 background-image
背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,我所指的并非是用这种方法,我用的方法还是CSS。background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是none,而要加的话,就是在后面加上这个none就可以了。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF)}
h1{background-image:url(none)}

大家在使用里的背景图片时,一定常常遇到一些图片因为太小,而产生种种如图片的重复出现而破坏了整个页面的美感,想换成其它图片又不合适之类的麻烦情况吧。不过现在好了,大家只要用了以下的几个CSS里控制图片方法,那么你以后就不会再有此类的麻烦事发生了。

·图片是否重复显示 background-repeat
有时候重复显示是需要的,可是有时候重复显示则是让人头痛的,现在这个可以很好的帮助你了,而且它还可以帮你控制图片重复的方式(水平方向重复、垂直方向重复以及两个方向都有重复),而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开)、repeat-y(垂直方向铺开)、repeat(两个方向铺开)。当然,它可以控制图片的重复,也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(repeat)。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat}

·定位图片显示位置 background-position
一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么background-position这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%),由两个值来设定,中间用空格来隔开。它的主要的几个值有left|center|right和top|center|bottom,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如50%表示的位置是在中心,而50px的水平值则表示图片距左上角区域水平移动50px单位;这里要特别指出的是,1当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为50%;2当你设置的值是负数的时候,则表示背景图片超出边界。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-position:100px 10px}

·控制图片是否滚动 background-attachment
上面的两步可以帮你完成图像的定位,可是这样做好以后还不是完美的,因为如果你的页面有滚动条的时候,那么你这张背景图片就不会永远定位在那个位置了,如果想要图片永远定位在那个位置,就只有让这张图片随着页面的内容的滚动而滚动,这时background-attachment就可以帮你了你只要加入scroll(静止)和fixed(滚动)中的其中一个就可以了。当然不是让你乱加的,毕竟scroll是默认的,也就是不让图片随页面的内容而滚动的。
例:body{background-image:url(file&:///C:/WINDOWS/BACKGRND.GIF);background-repeat:no-repeat;background-attachment:fixed}

好了,经过以上这番设置后,我相信你的背景一定会更美的,但是过多的代码往往可读性很差,容易让人产生错误,所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的URL后面,以免图片显示不出来。
例:body{background:green url(file&:///C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat}

-by- 壹哥 发表于 2008-06-10 00:42
发表评论
 
昵称
主页
标题
内容
算式的解
看不清校验算式?
 
| 设为首页 | 加入收藏 | 联系我们 | 关于站长 |

本站所有信息均来源于网络,如有侵犯您的权益请联系我们.
经核实后我们会在第一时间内将其删除.
联系方式: wsayi8@126.com QQ群: 35306281
Copyright© 2007 - 2008 壹哥 All Rights Reserved