首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

精通CSS.DIV网页式样与布局(四) ——页面背景

2012-10-21 
精通CSS.DIV网页样式与布局(四) ——页面背景咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个

精通CSS.DIV网页样式与布局(四) ——页面背景

咱们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,他直接决定了整个网页的风格和色调。我们这回主要来学习如何用CSS来设置背景颜色、背景图片。

背景颜色:CSS设置背景颜色特别简单:background-color:采用十六进制的设计方法。

背景颜色不但可以给网页设置背景颜色,同样也可以给网页分块。我们接下来看,用背景色给页面分块:我们看代码:


这里还要说一点的是:正文咱们并没有给他设置颜色,然而在topbanner和leftbanner中却设置了颜色,所以没有设置颜色的就继承body的,设置了之后就覆盖原来的。通过背景色和对整个网页进行分块,能达到很好的排版的效果。

CSS不但可以设置页面的背景颜色,同样可以给背景添加图片:我们看一下代码


然后我们看一下效果:

精通CSS.DIV网页式样与布局(四) ——页面背景

我们看到这个小图片在横向和纵向都布满了这个页面,效果很好。
我们刚才看到了一个小小的图片的重复能布满整个页面,但是倘若我们不希望这样重复,我们应该怎么设置:


我们回头看代码,我们设置了背景颜色,重复的方向还有背景图片。我们看效果:

精通CSS.DIV网页式样与布局(四) ——页面背景

我们若把background-repeat设置为repeat-x那么效果我想大家都知道,大家自己动手来完成。

我们刚才看到了背景图片的重复,无乱是X轴,还是Y轴,都是从左上角开始的,倘若我们想改变这些呢,我们应该怎么设置:我们继续看背景图片的位置:

我们看代码:


代码里边,我们设置了不重复,背景图片的位置:右下开始重复,我们同时设置了背景图片。我们看效果:

精通CSS.DIV网页式样与布局(四) ——页面背景

通过设置图片的背景的位置,便可以很好的利用一些大图片作为整个网页的背景,而文字在上方。

我们刚才的效果可以发现,背景图片与文字的相对位置是固定的,跟着图片一起动,那么我们应该怎么设置
固定背景图片呢?我们继续看:


当文字移动的时候,背景图片不会随着图片的移动而移动。我们接下来继续完善。


1楼haoyongliang888前天 23:23
学习了。
Re: yi_zz前天 09:55
回复haoyongliang888n一起学习~

热点排行