我是伊只雄熊

导航

CSS 基础 例子 图片拼合技术

  利用background-position xpos ypos

  就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片

  如: background-position: 15px 20px;(指将图片向右移15px,向下移20px)

     background-position: left -29px;(当中的left指从图片的最左端读起,-29px就是将图片向上移动29px)

例子:

原始图片:

html代码:<!DOCTYPE html><html>

<head>
<meta charset="utf-8"> 
<title>图片拼合技术</title>  
<style>
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites_hover.gif') 0 0;}
#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;} #next{left:129px;width:43px;} #next{background:url('img_navsprites_hover.gif') -91px 0;} #next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;} </style> </head> <body> <ul id="navlist"> <li id="home"><a href="default.asp"></a></li> <li id="prev"><a href="css_intro.asp"></a></li> <li id="next"><a href="css_syntax.asp"></a></li> </ul> </body> </html>

运行结果:

鼠标移动到第一个图片,颜色变暗,其实是重新移动了图片

 

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}

鼠标移动上去时候,图片想上移动45px

 

 

 

  

 

posted on 2018-01-29 17:10  我是伊只雄熊  阅读(215)  评论(0编辑  收藏  举报