用CSS实现给图片上色的效果

文章来源于 Kily`s Blog，感谢作者 Kily`s 给我们带来经精彩的文章！

设计教程/前端设计/前端设计2009-10-12

当你鼠标移动上去的时候图片会由黑白变成彩色的效果。刚看风的时候还以为用了js或者jquery呢。再用firebug一看就明白了：用到的只是一个简单的css sprite技术。

步骤是这样的：

1.先把你想要做的图片放到PS里面进行去色处理-“图像–调整–去色”或者“ctrl+shift+u”

2.将此图和原图片整合成上下两张的图片，如下图：

用CSS实现给图片上色的效果

3.下一步写下代码：

xhtml代码：

<div id="box"> <a href="#"> <span></span> </a> </div>

CSS代码：

a {
	float:left;
}
#box span {
	border:3px solid #ccc;
	display:block;
	width:170px;
	height:120px;
	background:url(flower.jpg) center top no-repeat;
}
#box a:hover span {
	background:url(flower.jpg) center -120px no-repeat;
}

进入论坛参与讨论: http://www.missyuan.com/viewthread.php?tid=424366

情非得已