Deadline !!!

 Love like you've never been hurt,And dance like no one's watching...
« 上一篇: 《Can't_let_go》“新鸳鸯蝴蝶梦”点击收听~ 下一篇: 善用重要HTML标记增强网页各种功能 »
Deadline @ 2004-12-24 17:35

说到网页背景就是指的背景颜色和颜色图片,至于它们在网页中的添加方法,这两个我想大家一定都有所了解,最为常见的是在网页中添加bgcolor="#808080"background="URL",但是还有一种方式更为方便也非常好,就是使用CSS样式来做的,而且如果有朋友对这套模版有所修改的话,也会发现背景图片都是在Css里面控制的!好,下面列出一些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}
-------------------------------------------------------------------
参考内容为网络资料,具体原创作者未知~!

最新评论


candidate

2004-12-24 18:18

过节了!圣诞快乐!

朋友谢谢你,祝你在新的一年里,生活更加愉快~
节日快乐!


3p

2004-12-25 01:14

deadline开始讲解这些#$%@^*术语了吗~,太好了~~,我想试着改改摸板都快疯掉了~~~~~

西西,生蛋快乐:}



M

2004-12-26 22:56

非常有用的说!!可以可以!


评论 / 个人网页 / 扔小纸条
* 昵称

已经注册过? 请登录

新用户请先注册 以便能显示头像及追踪评论回复

Email
网址
* 评论
表情
 


 

分类小组论坛
杂谈 , 娱乐、八卦 , 文学、艺术 , 体育 , 旅游、同城 , 象牙塔 , 情感 , 时尚、生活 , 星座 , 科技

请注意遵守中华人民共和国法律法规, 如威胁到本站生存, 将依法向有关部门报告, 同时本站的相关记录可能成为对您不利的证据.

相关法律法规
全国人大常委会关于维护互联网安全的决定
中华人民共和国计算机信息系统安全保护条例
中华人民共和国计算机信息网络国际联网管理暂行规定
计算机信息网络国际联网安全保护管理办法
计算机信息系统国际联网保密管理规定

网志分类
所有日志 (192)
走一程写一程 (77)
我的菜谱 (4)
原创文章收藏 (12)
经典歌曲欣赏 (32)
学习进度记录 (13)
瞬间留影留念 (4)
网络酷贴收藏 (10)
随笔随行 (1)
瞬间留影 (1)
学习记录 (0)
未分类 (38)
站内搜索
友情链接
我的歪酷 非非共享界
Deadline的新闻组~
诸葛的贼窝
学知识
Deadline的图片博客~
Deadline网易相册~
小型应用程序荟萃
CSS圆角区块容器生成器
javaTang
系统进程描述
中国Xml论坛
Letterjames
网页动态配色
Unsv.Com
路途生涯社区
在线字典~
星星精品论坛
在线翻译
English Corner
万千英语族
全库网-IP
旺旺英语论坛
励志外语
Benne
郁闷王生
雨吁
经典桌面资源站
Donews
极品音乐
产生Email图标的网站

歪酷博客

订阅 RSS

 

0356129