巧用css控制网页背景

《巧用css控制网页背景》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、巧用CSS控制网页背景>>edu.5151doc.教育资源库我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧，这个我想也是有的，因为这些图片不是太大就是太小，或者太乱，那么有没有办法让图片能合自己的主页的胃口呢？答案是肯定的。本篇详细介绍了巧用CSS控制网页背景。不过，我想在网上“成家”的朋友一般分为在网吧里“开业”（就像我一样，刚开始从他人的主页拉相关的代码来改的），还有就是在自己家里用DL里面的设置也是基本相同的，都可以在里加入相关的语句来完成。但是在这里，我所指的并非是用这种方法，我用的方法还是CSS。background-image这个的主要功能也

2、就是用来显示图片，如果需要显示图片的话，那么只要在后面加上url(图片的地址）就可以了，不显示嘛，那是最简单不过的了，什么也不要就行了，因为这个默认的就是none，而要加的话，就是在后面加上这个none就可以了。例：body{background-image:url(file:///C:/age:url(none)}大家在使用里的背景图片时，一定常常遇到一些图片因为太小，而产生种种如图片的重复出现而破坏了整个页面的美感，想换成其它图片又不合适之类的麻烦情况吧。不过现在好了，大家只要用了以下的几个CSS里控制图片方法，那么你以后就不会再有此类的麻烦事发生了。·图片是

3、否重复显示background-repeat有时候重复显示是需要的，可是有时候重复显示则是让人头痛的，现在这个可以很好的帮助你了，而且它还可以帮你控制图片重复的方式（水平方向重复、垂直方向重复以及两个方向都有重复），而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x（水平方向铺开）、repeat-y（垂直方向铺开）、repeat（两个方向铺开）。当然，它可以控制图片的重复，也可以控制图片不重复的。no-repeat这个就是用来表示只显示一幅背景图片，而不是重复出现的，这个可不是默认的哟，默认的是重复显示背景图片（repe

4、at）。例：body{background-image:url(file:///C:/，也可以用百分数值指定相对位置或用一个值来指定绝对位置，如50%表示的位置是在中心，而50px的水平值则表示图片距左上角区域水平移动50px单位；这里要特别指出的是，1当你设置值的时候只提供一个值，则相当于只指定水平位置，垂直自动设置为50%；2当你设置的值是负数的时候，则表示背景图片超出边界。例：body{background-image:url(file:///C:/ent上面的两步可以帮你完成图像的定位，可是这样做好以后还不是完美的，因为如果你的页面有滚动条的时候，那么你这

5、张背景图片就不会永远定位在那个位置了，如果想要图片永远定位在那个位置，就只有让这张图片随着页面的内容的滚动而滚动，这时background-attachment就可以帮你了你只要加入scroll（静止）和fixed（滚动）中的其中一个就可以了。当然不是让你乱加的，毕竟scroll是默认的，也就是不让图片随页面的内容而滚动的。例：body{background-image:url(file:///C:/ent:fixed}好了，经过以上这番设置后，我相信你的背景一定会更美的，但是过多的代码往往可读性很差，容易让人产生错误，所以在这里我要告诉大家的就是可以把以上的代码

6、全部加在一起使用，也就是说把以上相关的代码加到background中。在把代码加到background中的时候要在每个值中间加上空格来隔开，而且不要把背景颜色的代码放在背景图片的URL后面，以免图片显示不出来。例：body{background:greenurl(file:///C:/WINDOWS/BACKGRND.GIF)fixed100px50pxno-repeat}最后提醒一下大家，如果用代码直接插入的话，那么一定要放下面这个代码的里后再放在之间才能正常显示出来！接下来我再介绍一下用DW4制作以上样式的方法，因为在DW中已经很详细的列出各项来了，具体的作用

7、我也说明过了，所以就简要的介绍一下吧，只要大家能够明白就行了。1.在此之前大家应该把CSSStyles这个窗口打开，如未打开的话，12下一页[这篇文章来自..，]那么就按Shift+F11或者从Window下拉菜单中选择此项就可以了。2.点击右键选择newstyle...这个选项或者点击下面的带有+号的图标。3.在弹出的窗口中的选择如下，tag选择body因为我们上面介绍的CSS样式都是关于body的，而在这里我也只是介是background-position中的水平方向垂直方向。5.最后再点击OK就可以完成了。完成后你就可以在该页的代码（View下的Code选项

8、）中找到它