CSS之background属性

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

背景色:background-color

背景图:backgoround-image

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

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

CSS之background属性

示例:

1、背景色:

  css文件代码

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

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

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

  效果图

CSS之background属性

2、背景图(不重复)

  css代码

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

  效果图

CSS之background属性

3、背景图(重复)

css代码

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

  效果图

CSS之background属性

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;
}

 效果图

CSS之background属性

上一篇:elasticsearch2


下一篇:Unity3d 引擎原理详细介绍