CSS黑白變成彩色圖片的塊狀導(dǎo)航

2024-09-05 12:20:08

字體：大中小

供稿：網(wǎng)友

CSS控制一幅黑白圖片變成彩色，并以此為基礎(chǔ)制作一個(gè)新穎的圖片塊狀導(dǎo)航特效，每一個(gè)方塊最開始是黑白色的，CSS的應(yīng)用使鼠標(biāo)放上后調(diào)用彩色的圖片，形成一個(gè)由黑白變彩色的塊狀導(dǎo)航效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS黑白變成彩色圖片的塊狀導(dǎo)航</title><style type="text/css">#menu {position:relative; width:300px; height:300px; background:transparent url(/jscss/demoimg/200907/menu_bw.jpg); overflow:hidden; margin:0 auto;}#menu ul {margin:0; padding:0;}#menu li {list-style-type:none; width:100px; height:100px; display:inline;}#menu a {display:block; float:left; width:100px; height:0; overflow:hidden; color:#000; text-decoration:none; padding-top:100px; background:transparent url(/jscss/demoimg/200907/menu_col.jpg) no-repeat 500px 500px;}* html #menu a  {height:100px; he/ight:0;}#menu a#item1:hover {background-position: 0 0; z-index:50;}#menu a#item2:hover {background-position: -100px 0; z-index:50;}#menu a#item3:hover {background-position: -200px 0; z-index:50;}#menu a#item4:hover {background-position: 0 -100px; z-index:50;}#menu a#item5:hover {background-position: -100px -100px; z-index:50;}#menu a#item6:hover {background-position: -200px -100px; z-index:50;}#menu a#item7:hover {background-position: 0 -200px; z-index:50;}#menu a#item8:hover {background-position: -100px -200px; z-index:50;}#menu a#item9:hover {background-position: -200px -200px; z-index:50;}</style></head><body><div   class="70qarhlowxag"   id="menu"><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li></ul></div></body></html>

上一篇：五顏六色的按鈕組成的導(dǎo)航條

下一篇：藍(lán)色背景平滑的圓角形CSS菜單欄