日期:2013-06-17  浏览次数:21144 次

  我想大家常常为一些比较合适于本人的网页背景的图片而忧虑吧,这个我想也是有的,由于这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合本人的主页的胃口呢?答案是肯定的。想知道怎样来实现嘛,好吧,大家如今开始跟着我做,我保证大家一定一学就会。不过,我想在网上“成家”的朋友普通分为在网吧里“开业”(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在本人家里用DW或FP之类的专业软件制造好上传的,所以呢,我打算分开两步引见,首先为在网吧里“开业”的朋友着想吧,最后再简要的引见一些用DW4做的背景款式。其实总得说来一切都是一样的,只不过是采用的方式不同罢了。好了闲话少说了,如今就入正题吧。

  说到背景也就只要背景颜色和颜色图片,这两个我想大家一定都知道在里加入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}

  最后提示一下大家,如果用代码直接插入的话,那么一定要放下面这个代码的里后再放在之间才能正常显示出来!


  接下来我再引见一下用DW4制造以上款式的方法,由于在DW中曾经很详细的列出各项来了,具体的作用我也说明过了,所以就简要的引见一下吧,只需大家能够明白就行了。

  1.在此之前大家应该把CSS Styles这个窗口打开,如未打开的话,那么就按Shift+F11或者从Window下拉菜单中选择此项就可以了。

  2.点击右键选择new style...这个选项或者点击下面的带有+号的图标。

  3.在弹出的窗口中的选择如下,tag选择body由于我们上面引见的CSS款式都是关于body的,而在这里我也只是引见这个里面的background,其它的不要引见内容之内;下面的type选择第二个;define也选择第二个,这样你呆会就可以在该文件中的之间找到一个了,而这里面的内容其实就是我上面引见的。

  4.点击OK后弹出的窗口才是最重要的。我之前已说过,我们这次次要引见的是background这个选项,所以在旁边的窗口中选中它吧。选中当前左边的窗口将会变成与它相关的设置项,具体的我在上面引见过了,大家只需参照上面的引见就可以完成了。不过需求说明一下的是在这个窗口中的最下面两项其实就是background-position中的水平方向垂直方向。

  5.最后再点击OK就可以完成了。完成后你就可以在该页的代码(View下的Code选项)中找到它们了。