CSS黑白变成彩色图片的块状导航

2024-09-05 12:20:08

字体：大中小

来源：转载

供稿：网友

CSS控制一幅黑白图片变成彩色，并以此为基础制作一个新颖的图片块状导航特效，每一个方块最开始是黑白色的，CSS的应用使鼠标放上后调用彩色的图片，形成一个由黑白变彩色的块状导航效果。

<!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黑白变成彩色图片的块状导航</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 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>

上一篇：五颜六色的按钮组成的导航条

下一篇：蓝色背景平滑的圆角形CSS菜单栏

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注