这篇文章主要介绍了CSS如何控制网页背景颜色,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
我想大家常常为一些比较合适于自己的网页背景的图片而发愁吧,这个我想也是有的,因为这些图片不是太大就是太小,或者太乱,那么有没有办法让图片能合自己的主页的胃口呢?答案是肯定的。
想知道怎么来实现嘛,好吧,大家现在开始跟着我做,我保证大家一定一学就会,不过,我想在网上成“家”的朋友一般分为在网吧里“开业”(就像我一样,刚开始从他人的主页拉相关的代码来改的),还有就是在自己家里用DW或FP之类的专业软件制作好上传的,所以呢,我打算分开两步介绍,首先为在网吧里“开业”的朋友着想吧,最后再简要的介绍一些用DW4做的背景样式。
其实总得说来一切都是一样的,只不过是采用的方式不同罢了。好了闲话少说了,现在就入正题吧。
说到背景也就只有背景颜色和颜色图片,这两个我想大家一定都知道在里加入背景=? 808080“和背景=癠RL"对吧,可是我这里将要介绍不是这样做的,而是用CSS样式来做的,虽说有些麻烦,可是整体配合还是非常不错的。
<>强,压力背景颜色background
我想这个我就不用多做介绍了,颜色代码我想大家都知道的,不是用英文来代替就是用指定的代码来表示的。这个的默认值是透明的(透明色)。例:
<>强,压力背景图片背景图片
背景图片和背景颜色在HTML里面的设置也是基本相同的,都可以在里加入相关的语句来完成。但是在这里,我所指的并非是用这种方法,我用的方法还是CSS.background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是没有,而要加的话,就是在后面加上这个没有就可以了。例:
大家在使用里的背景图片时,一定常常遇到一些图片因为太小,而产生种种如图片的重复出现而破坏了整个页面的美感,想换成其它图片又不合适之类的麻烦情况吧。不过现在好了,大家只要用了以下的几个CSS里控制图片方法,那么你以后就不会再有此类的麻烦事发生了。
<>强,压力图片是否重复显示平铺方式
有时候重复显示是需要的,可是有时候重复显示则是让人头痛的,现在这个可以很好的帮助你了,而且它还可以帮你控制图片重复的方式(水平方向重复,垂直方向重复以及两个方向都有重复),而要实现这三个方向的重复也就只要在bcackground-repeat后面加上repeat-x(水平方向铺开),repeat-y(垂直方向铺开),重复(两个方向铺开)。
当然,它可以控制图片的重复,也可以控制图片不重复的.no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的,这个可不是默认的哟,默认的是重复显示背景图片(重复)。例:
<>强,压力定位图片显示位置背景位置
一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么背景位置这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% - 0%),由两个值来设定,中间用空格来隔开。
它的主要的几个值有左中心右和上中心下,也可以用百分数值指定相对位置或用一个值来指定绝对位置,如50%表示的位置是在中心,而50 px的水平值则表示图片距左上角区域水平移动50 px单位;这里要特别指出的是,1当你设置值的时候只提供一个值,则相当于只指定水平位置,垂直自动设置为50%;2当你设置的值是负数的时候,则表示背景图片超出边界。例:
<>强,压力控制图片是否滚动background-attachment
