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;
}
效果图