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

发表于 2009年10月9日由 kily

听着挺新鲜的，其实现起来很简单。让我忽发其想的是网友说到这个网页中幻灯片的效果：http://www.fullyillustrated.com/portfolio/

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

步骤是这样的：

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

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

flower

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;
}

查看效果及代码

《用CSS实现给图片上色的效果》上有 46 条评论

Note 在 2009年10月19日22:53 说：

555,以前学过的,忘记了…

回复 ↓
- kily 在 2009年10月19日22:56 说：
  
  @Note 复习一下也无妨。
  
  回复 ↓
踏雪残情在 2009年10月12日19:48 说：

忆古思今的感觉!

回复 ↓
- kily 在 2009年10月13日06:30 说：
  
  @踏雪残情呵呵。老兄挺有情调的哈。
  
  回复 ↓
  - 踏雪残情在 2009年10月14日13:30 说：
    
    嘿嘿。
    
    回复 ↓
xuyuanhu 在 2009年10月11日11:54 说：

CSS忒神奇了，这都可以。很好很强大。

回复 ↓
博客动力在 2009年10月11日04:35 说：

为什么我看不懂呢？

回复 ↓
- kily 在 2009年10月11日06:23 说：
  
  @博客动力就是用CSS模拟图片换色的效果呀！
  
  回复 ↓
汇感之舟在 2009年10月11日01:11 说：

原来这样

回复 ↓
先看看在 2009年10月10日17:30 说：

这个挺有意思的，可以再菜单栏那里也搞下

回复 ↓
张楠在 2009年10月10日13:29 说：

你博客的样式有点太亮了吧，看的多了，有点累了~
顺便问下，如果页面中存在STYLE会影响W3C的标准么。或有其他什么影响么

回复 ↓
- kily 在 2009年10月10日13:34 说：
  
  @张楠嗯。正打算换主题呢，页面中的style标签只能放在head标签里面，如果实在想在页面上设置样式的话就用内联模式表也是可以的。
  
  回复 ↓
sleepy 在 2009年10月10日13:23 说：

这样偶尔用用还行，且对小图片还可以
感觉还是用js简单

回复 ↓
- kily 在 2009年10月10日13:34 说：
  
  @sleepy 老兄你的博客怎么很慢啊。貌似是我机子的问题。
  
  回复 ↓
wuleilei 在 2009年10月10日13:02 说：

这个技巧很好~~
收藏了，说不定以后用得着~~

回复 ↓
安在 2009年10月10日12:32 说：

还以为JS能这么强大==

回复 ↓
- yedo 在 2009年10月10日13:01 说：
  
  用JS效果更好。
  
  回复 ↓
  - kily 在 2009年10月10日13:05 说：
    
    @yedo JS做缓动效果应该会好点。
    
    回复 ↓
    - yedo 在 2009年10月10日13:48 说：
      
      嗯，能用CSS做的还是用CSS吧，嘿嘿。
      Javascript我刚开始学没多久…
      
      回复 ↓
      - kily 在 2009年10月10日13:51 说：
        
        @yedo 呵呵。我也是刚学JS。
huangjun 在 2009年10月10日10:58 说：

firebug是干什么用的啊？

回复 ↓
- kily 在 2009年10月10日12:35 说：
  
  @huangjun Firebug是火狐的一个插件，用来调试网页的。
  
  回复 ↓
90后的贼在 2009年10月10日10:06 说：

哎，俺的ps技术一直以来都是很赖

回复 ↓
- kily 在 2009年10月10日12:32 说：
  
  @90后的贼呵呵。是很不赖吧？
  
  回复 ↓
Hobo 在 2009年10月10日09:33 说：

导航条经常用到这个代码

回复 ↓
- kily 在 2009年10月10日09:45 说：
  
  @Hobo 嗯。差不多吧^!^
  
  回复 ↓
yedo 在 2009年10月10日08:58 说：

这样简单的background position还可以操作，像淘宝的用一张整个的大背景，得计算的多精确。想想就麻烦，哎

回复 ↓
- kily 在 2009年10月10日09:09 说：
  
  @yedo 明白了道理也挺简单的就是麻烦会用很多时间^!^
  
  回复 ↓
万戈在 2009年10月10日07:36 说：

原来是这样，呵呵，还以为真能上色呢
我把整站的背景图都合并成一张了，这样载入可以快些

回复 ↓
- kily 在 2009年10月10日08:47 说：
  
  @万戈嗯。css sprite技术确实很大的减少了http请求次数，值得推荐^!^
  
  回复 ↓
mimzyx 在 2009年10月10日02:16 说：

这个有意思！

回复 ↓
- kily 在 2009年10月10日06:29 说：
  
  @mimzyx 你的留言和下面”Louis Han “的留言合起来就是活生生的范伟范厨师^!^
  
  哈哈!
  
  回复 ↓
handy feng 在 2009年10月10日01:40 说：

过来向你学习学习了。…….

回复 ↓
- kily 在 2009年10月10日06:23 说：
  
  @handy feng 制作挺简单，主要是想法有创意^!^
  
  回复 ↓
Louis Han 在 2009年10月10日01:17 说：

相当有意思

回复 ↓
- kily 在 2009年10月10日06:23 说：
  
  @Louis Han 呵呵。还行吧。
  
  回复 ↓
feicun 在 2009年10月10日01:04 说：

其实我连怎么把两张图片拼接到一起都不知道……

回复 ↓
- kily 在 2009年10月10日06:24 说：
  
  @feicun 要不我专门写个整合sprite的小文章。哈哈。
  
  回复 ↓
  - feicun 在 2009年10月10日15:29 说：
    
    我也不太明白sprite是啥意思……我的意思就是说，如何在电脑上把两张图片拼接成一张……用画图么
    
    回复 ↓
    - kily 在 2009年10月10日15:59 说：
      
      @feicun 画图我是不知道怎么搞，我一般会用PS。调整画布大小，ctrl+c ctrl+v就搞定了。
      
      回复 ↓
whisperer 在 2009年10月10日00:43 说：

IE下有很多滤镜可以用啊。

我还是习惯用改变透明度的方法，哈免得放太多图片

回复 ↓
- kily 在 2009年10月10日06:26 说：
  
  @whisperer 滤镜只有IE支持，属于IE的特产，没法兼容其它标准浏览器。所以现在基本上已经被废除了^!^
  
  回复 ↓
  - whisperer 在 2009年10月10日12:30 说：
    
    所以我用改变透明度的方法嘛
    
    回复 ↓
angelscat 在 2009年10月10日00:12 说：

额,打开那个网站,第一眼看到的是那个灯光怎么搞的 – -

回复 ↓
- whisperer 在 2009年10月10日00:44 说：
  
  应该是Lavalamp吧？
  
  我的主页的导航就用了Lavalamp效果，把背景图片换成他的亮亮的图片就应该可以了
  
  回复 ↓
  - kily 在 2009年10月10日06:27 说：
    
    @angelscat 估计和以前inove的导航条是一个效果。
    
    回复 ↓

Kily's Blog

calls me kily

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

《用CSS实现给图片上色的效果》上有 46 条评论

发表评论取消回复

《用CSS实现给图片上色的效果》上有 46 条评论

发表评论 取消回复

发表评论取消回复