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  孔扎根  阅读(386)  评论(0)  编辑  收藏  举报

导航