在網(wǎng)頁(yè)中，我們會(huì)用到大量的圖片，其中大部分是作為背景存在的。大家都會(huì)用Background-image的屬性指定圖片。但今天重點(diǎn)演示一下使用background-position的妙用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul
{
width: 300px;
height: 300px;
margin: 0px auto;
padding: 0px;
overflow: hidden;
background: transparent url(images/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(images/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>
</head>
<body>
<ul>
<li><a id="item1" href="#" title="Item 1"></a></li>
<li><a id="item2" href="#" title="Item 2"></a></li>
<li><a id="item3" href="#" title="Item 3"></a></li>
<li><a id="item4" href="#" title="Item 4"></a></li>
<li><a id="item5" href="#" title="Item 5"></a></li>
<li><a id="item6" href="#" title="Item 6"></a></li>
<li><a id="item7" href="#" title="Item 7"></a></li>
<li><a id="item8" href="#" title="Item 8"></a></li>
<li><a id="item9" href="#" title="Item 9"></a></li>
</ul>
</body>
</html>情況是這樣的，我們希望將一個(gè)圖片切割為9個(gè)部分，每個(gè)部分當(dāng)鼠標(biāo)滑過的時(shí)候，都可以實(shí)現(xiàn)單獨(dú)地變成灰色的效果。 我們有兩張圖片  
我們首先需要顯示第一張照片，然后當(dāng)用戶將鼠標(biāo)滑過某一個(gè)方塊的時(shí)候，應(yīng)該將圖片切換為灰色的部分。 
由此可見，css是多么強(qiáng)大并且有創(chuàng)造力
|
