CSS之background属性

 css背景是个很有意思的东西,可设置

背景色:background-color

背景图:backgoround-image

背景图显示相对位置:background-position,正数图片往右下移,负数图片向左上移

 

背景图片示例:(每张图片高度50px,空白处50px)

 

示例:

1、背景色:

  css文件代码

.c1{
    width: 100%;
    height: 50px;
    background-color: #425a66;
}

  html代码,跟下面的所有情况一样,后面就不再写了

<body>
        <div class="c1"></div>
</body>

  效果图

2、背景图(不重复)

  css代码

.c1{
    width: 100%;
    height: 500px;
    background-color: #425a66;
    background-image: url(quantu.png);
    background-repeat: no-repeat;

  效果图

 

3、背景图(重复)

css代码

.c1{
    width: 100%;
    height: 500px;
    background-color: #425a66;
    background-image: url(quantu.png);
}

  效果图

 

4、显示背景图相对位置

css代码(0:图片在x轴不动,-300图片在y轴向上移动300px,正好显示第4张图片)

由于我们的

height: 50px; 与图片的高度相同
所以正好显示了一张小图片。
.c1{
    width: 100%;
    height: 50px;
    background-color: #425a66;
    background-image: url(quantu.png);
    background-repeat: no-repeat;
    background-position: 0 -300px;
}

 效果图

posted on 2016-12-01 12:11  孔扎根  阅读(385)  评论(0编辑  收藏  举报

导航