|
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
代碼:
<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"> </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>
是不是非常簡(jiǎn)單，而我們所用到的圖片也僅僅是下面的2張而已:
現(xiàn)在我們來(lái)分析 background-position 的用法：
A元素一開(kāi)始的時(shí)候背景位置設(shè)置成 background-position:500px 500px，而它的大小僅只有100px*100px而已，所以A標(biāo)簽下的所有背景都超過(guò)了可視范圍無(wú)法顯示，我們一開(kāi)始看見(jiàn)的黑白照片就是UL的背景圖象。接著當(dāng)鼠標(biāo)移動(dòng)到A元素上的時(shí)候，再根據(jù)每個(gè)A元素所處的位置來(lái)分別為他們?cè)O(shè)置背景的移動(dòng)大小，這樣就形成上面的黑白圖片交替效果。
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁(yè)制作版塊參加討論
|
