网页背景图片是可以使用CSS进行精确定位的,位置的坐标有多种表示方法。例如使用描述性词语表示位置(left、top、center…)
#content {
border:1px solid #000fff;
height:500px;
background-image:url(images/bgGIF);
background-repeat: no-repeat;
background-position:left bottom;
}
表示背景被放置在左下方。
还可以使用数值(20px、1em…)对背景图片定位,百分比可能比较少用,常见的有50%、100%等数值。例如希望背景图片水平居中,距离容器顶部20px,可以使用
background-position: 50% 20px;
关于使用百分比定位的更多论述可参看enet学院css设计相关教程
使用这个方法还可以创造出许多小技巧。例如一些网页制作者喜欢将同类背景图案制作在一张图片上,然后再利用CSS控制显示的具体位置。
如:
.navgp1, .navgp2, .navgp3, .navgp4{
float:left;
background-image:url(../../images/nav-ico.gif);
background-repeat:no-repeat;
height:25px;
width:350px;
margin-top:16px;
margin-left:20px;
}
.navgp2{
background-position:0px -25px;
}
.navgp3{
background-position:0px -50px;
margin-top:5px;
}
.navgp4{
background-position:0px -75px;
margin-top:5px;
}
上面的CSS中的4个盒子都使用了nav-ico.gif这张图片做背景,但是因为图片显示位置不同所以看上去就像是四张不同的图片,此类技巧还有很多扩展,可以有效减少制图时麻烦。例如使用在有鼠标响应变化的导航按钮中。