天天看点

精通CSS+DIV网页样式与布局--页面背景

       上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调。这篇博客简单的总结一下如何用CSS来设置背景颜色、背景图片。首先,我们来看一张图:

精通CSS+DIV网页样式与布局--页面背景

        接着,小编会随着上述思维导图的脉络,对各个知识点进行详细讲解,首先,我们来看页面背景色,例子代码和运行效果如下所示:

        页面背景色

        运行效果如下:

精通CSS+DIV网页样式与布局--页面背景

       CSS设置背景颜色特别简单:background-color,采用十六进制的设计方法。背景颜色不但可以给网页设置背景颜色,同样也可以给网页分块。我们接下来看,用背景色给页面分块,例子和代码如下所示:

        用背景色给页面分块

精通CSS+DIV网页样式与布局--页面背景

        分析上面的代码我们可以看出,在整个body中采用了table来进行分块,就看到了如上的显示效果,这里还要说一点的是,正文部分我们在代码中并没有给其设置颜色,然而在topbanner和leftbanner中却设置了颜色,所以没有设置颜色的就继承body的,设置了之后就覆盖原来的。通过背景色和对整个网页进行分块,能达到很好的排版的效果。CSS不但可以设置页面的背景颜色,同样可以给背景添加图片,我们来看一下例子代码和运行效果:

         页面背景图

精通CSS+DIV网页样式与布局--页面背景

        从上面的小时效果我们看到这个小图片在横向和纵向都布满了这个页面,是不是很漂亮nie,传说中的五叶草,代表自信和坚强,希望看到这篇博文的小伙伴在新的一年,自信坚强,无论遇到什么样的困难,都勇敢无畏,我们刚才看到了一个小小的图片的重复能布满整个页面,但是倘若我们不希望这样重复,我们应该怎么设置呢?看下面的例子和代码:

        背景图片的重复

精通CSS+DIV网页样式与布局--页面背景

        如果我们若把background-repeat设置为repeat-x会有怎样的惊喜等着我们nie,小伙伴们可以自己动手试试,我们刚才看到了背景图片的重复,无乱是X轴,还是Y轴,都是从左上角开始的,倘若我们想改变这些呢,我们应该怎么设置,接着,我们来看背景图片的位置,例子代码和运行效果如下:

         背景图片的位置

精通CSS+DIV网页样式与布局--页面背景

        通过设置图片的背景的位置,便可以很好的利用一些大图片作为整个网页的背景,而文字在上方。我们刚才的效果可以发现,背景图片与文字的相对位置是固定的,跟着图片一起动,那么我们应该怎么设置固定背景图片呢?我们看下面的例子和运行效果:

        固定背景图片

精通CSS+DIV网页样式与布局--页面背景

        我们看到代码里边的background-attachment:fixed将背景图片固定住,当文字移动的时候,背景图片不会随着图片的移动而移动。

       小编寄语:该博文,小编主要简单总结了设置页面背景的相关知识,主要接好了页面背景,用背景色给页面分块,页面背景图,背景图片的重复,背景图片的位置以及固定背景图片,其中用背景色给页面分块中在整个body中采用了table来进行分块,就看到了如上的显示效果,这里还要说一点的是,正文部分我们在代码中并没有给其设置颜色,然而在topbanner和leftbanner中却设置了颜色,所以没有设置颜色的就继承body的,设置了之后就覆盖原来的。通过背景色和对整个网页进行分块,能达到很好的排版的效果。BS学习未完待续......