标签：高度 移动 bsp 效果 ges 设置 htm sharp blog
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;
}
效果图
标签：高度 移动 bsp 效果 ges 设置 htm sharp blog
原文地址：http://www.cnblogs.com/kongzhagen/p/6121388.html
