css背景是个很有意思的东西,可设置
背景色:background-color
背景图:backgoround-image
背景图显示相对位置:background-position,正数图片往右下移,负数图片向左上移
背景图片示例:(每张图片高度50px,空白处50px)
示例:
1、背景色:
css文件代码
.c1{ 100%; height: 50px; background-color: #425a66; }
html代码,跟下面的所有情况一样,后面就不再写了
<body> <div class="c1"></div> </body>
效果图
2、背景图(不重复)
css代码
.c1{ 100%; height: 500px; background-color: #425a66; background-image: url(quantu.png); background-repeat: no-repeat;
效果图
3、背景图(重复)
css代码
.c1{ 100%; height: 500px; background-color: #425a66; background-image: url(quantu.png); }
效果图
4、显示背景图相对位置
css代码(0:图片在x轴不动,-300图片在y轴向上移动300px,正好显示第4张图片)
由于我们的
height: 50px; 与图片的高度相同
所以正好显示了一张小图片。
.c1{ 100%; height: 50px; background-color: #425a66; background-image: url(quantu.png); background-repeat: no-repeat; background-position: 0 -300px; }
效果图