学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

CSS基础教程(四) 背景

发布时间:2019-12-31 点击:51

    关于怎么引入CSS至HTML文档,前面在HTML基础教程已经说过了,这里就不做介绍了,如果不了解,请点击:HTML基础教程之css层叠样式表

    这里就直接进入CSS的属性定义以及作用介绍了。

    一、背景颜色

    在CSS中背景颜色是由background-color来定义的,实例如下:

    body {background-color:#b0c4de;}
    body的标签选择器,代表的是整个页面,#b0c4de是颜色值,说到这里就需要介绍一下颜色值的定义了:

    1、十六进制,如:#b0c4de;

    2、RGB,如rgb(255,0,0);

    3、颜色名称,如:"red"。

    如果一个页面中很多标签定义了自己的样式,那么会覆盖处理。

    二、背景图像

    在CSS背景中,使用图像作为背景是由background-image定义的。

    body {background-image:url('bgdesert.jpg');}
    其中url('bgdesert.jpg')是图片路径以及名称。

    三、水平或者垂直平铺(背景图像)

    在背景图像的使用中,你一定会遇到平铺的问题,比如说你定义的div宽度为1000px;但是图像只有100px;那么图像不够遮盖这个div背景的,那么可以设置图片在X方向重复这张图片,直至铺满。

    在设置平铺的时候使用的是background-repeat属性,如果想要在x方向(水平方向)重复这张图片的话需要设置值为repeat-x。

    body
    {
    background-image:url('gradient.png');
    background-repeat:repeat-x;
    }
    但是请注意,这个属性需要先设置背景图片。

    如果想要在y(垂直方向)重复图片的话,就设置值为repeat-y即可(PS:默认情况下是平铺的)。

    如果不想图像重复平铺,可以设置值为:no-repeat.

    四、图像定位

    在默认情况下,背景图片的显示会在左上角开始,但是我们可以通过background-position属性来改变位置。

    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
    }
    这样背景图片就是从右上角的位置开始渲染。

    五、是否固定(背景图片)

    在CSS背景属性中还有一个属性,叫做background-attachment,这个属性很有意思,是用来设置背景图片是否随浏览器滚动条滚动的,默认情况下,背景图片是会随着滚动条滚动的,就是当一个页面很长时,滚动浏览器滚动条图片会逐渐被拉出屏幕,如果想要图片固定在浏览器上,不随页面的滚动而移动的话,可以设置这个属性为:fixed。

    body
    { 
        background-image:url('smiley.gif');
        background-repeat:no-repeat;
        background-attachment:fixed;
    }

    六、属性简写

    在上述代码中,我们讲述了背景颜色以及背景图片等属性,我们都是使用的是background-X来定义的,其实还有一种综合的方式,如下:

    body {background:#ffffff url('img_tree.png') no-repeat right top;}
    就是把所有的属性糅合到了一个属性里面定义。但是需要注意的是,使用background来同一定义的话,是有顺序限制的。

    当使用简写属性时,属性值的顺序为::

    1、background-color

    2、background-image

    3、background-repeat

    4、background-attachment

    5、background-position

    以上属性无需全部使用,你可以按照页面的实际需要使用.

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~
赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: