1、用 CSS 来控制网页背景.txt 男人的承诺就像 80 岁老太太的牙齿,很少有真的。你嗜烟成性的时候,只有三种人会高兴,医生 你的仇人和卖香烟的。用 CSS 来控制网页背景 我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的。想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会。不过,我想在网上“成家”的朋友一般分为在网吧里“开业” (就像我一样,刚开始从他人的主页拉相关的代码来改的) ,还有就是在自己家里用 DW 或 FP 之类的专业软件制作好上传的,
2、所以呢,我打算分开两步介绍,首先为在网吧里“开业”的朋友着想吧,最后再简要的介绍一些用 DW4 做的背景样式。其实总得说来一切都是一样的,只不过是采用的方式不同罢了。好了闲话少说了,现在就入正题吧。说到背景也就只有背景颜色和颜色图片,这两个我想大家一定都知道在里加入bgcolor=“#808080“和 background=“URL“对吧,可是我这里将要介绍不是这样做的,而是用CSS 样式来做的,虽说有些麻烦,可是整体配合还是非常不错的。 背景颜色 background-color我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是 t
3、ransparent(透明色) 。例:bodybackground-color:yellowH1background-color:#000000背景图片 background-image背景图片和背景颜色在 HTML 里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,我所指的并非是用这种方法,我用的方法还是 CSS。background-image 这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是 none,而要加的话,就是在后面加上这个 none 就可
4、以了。例:bodybackground-image:url(filebackground-repeat:no-repeat定位图片显示位置 background-position一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么 background-position 这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值 0% 0%) ,由两个值来设定,中间用空格来隔开。它的主要的几个值有 left|center|right 和 top|cen
5、ter|bottom,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如 50%表示的位置是在中心,而 50px 的水平值则表示图片距左上角区域水平移动 50px 单位;这里要特别指出的是,1 当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为 50%;2 当你设置的值是负数的时候,则表示背景图片超出边界。例:bodybackground-image:url(filebackground-repeat:no-repeat;background-position:100px 10px控制图片是否滚动 background-attachment上面的两步可以帮你完成图像的定
6、位,可是这样做好以后还不是完美的,因为如果你的页面有滚动条的时候,那么你这张背景图片就不会永远定位在那个位置了,如果想要图片永远定位在那个位置,就只有让这张图片随着页面的内容的滚动而滚动,这时 background-attachment 就可以帮你了你只要加入 scroll(静止)和 fixed(滚动)中的其中一个就可以了。当然不是让你乱加的,毕竟 scroll 是默认的,也就是不让图片随页面的内容而滚动的。例:bodybackground-image:url(filebackground-repeat:no-repeat;background-attachment:fixed好了,经过以上这
7、番设置后,我相信你的背景一定会更美的,但是过多的代码往往可读性很差,容易让人产生错误,所以在这里我要告诉大家的就是可以把以上的代码全部加在一起使用,也就是说把以上相关的代码加到 background 中。在把代码加到 background 中的时候要在每个值中间加上空格来隔开,而且不要把背景颜色的代码放在背景图片的 URL 后面,以免图片显示不出来。例:bodybackground:green url(file&:/C:/WINDOWS/BACKGRND.GIF) fixed 100px 50px no-repeat最后提醒一下大家,如果用代码直接插入的话,那么一定要放下面这个代码的里后再放在之间才能正常显示出来!