怎么是你

关注互联网,关注搜索,关注信息技术对现代生活方方面面的影响

« 外部引用CSS分为两种方式link和@import近日本博及M站统计及排名情况 »

CSS背景图片位置控制

        网页背景图片是可以使用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这张图片做背景,但是因为图片显示位置不同所以看上去就像是四张不同的图片,此类技巧还有很多扩展,可以有效减少制图时麻烦。例如使用在有鼠标响应变化的导航按钮中。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

最近发表

最新评论及回复

文章归档

Search

Powered By Z-Blog 1.8 Spirit Build 80722 Designed by Han'space

桂ICP备06007671号Copyright building. Some Rights Reserved.