CSS:background-position的用法

background-position的特殊用法：从一张图片中分离部分图片
<
style>

ul
{ width:300px
height:300px
margin:0px auto
padding:0px
overflow:hidden
background:transparent url(image/menu_gray.jpg)}
li
{list-style-type:none
width:100px
height:100px
float:left}
li a
{ display:block
width:100px
height:100px
text-decoration:none

background:transparent url(image/menu_color.jpg) no-repeat 500px 500px
}
a
#item1:hover
{background-position: 0 0
}
a
#item2:hover
{background-position: -100px 0
}
a
#item3:hover
{background-position: -200px 0
}
a
#item4:hover
{background-position: 0 -100px
}
a
#item5:hover
{background-position: -100px -100px
}
a
#item6:hover
{background-position: -200px -100px
}
a
#item7:hover
{background-position: 0 -200px
}
a
#item8:hover
{background-position: -100px -200px
}
a
#item9:hover
{background-position: -200px -200px
}
<
/style>

<
ul>

<
li>
<
a id="item1" href="
#" title="Item 1">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item2" href="
#" title="Item 2">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item3" href="
#" title="Item 3">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item4" href="
#" title="Item 4">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item5" href="
#" title="Item 5">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item6" href="
#" title="Item 6">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item7" href="
#" title="Item 7">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item8" href="
#" title="Item 8">
&
nbsp
<
/a>
<
/li>

<
li>
<
a id="item9" href="
#" title="Item 9">
&
nbsp
<
/a>
<
/li>

<
/ul>


所用到的图片
menu_gray.jpg

menu_color.jpg