html – 具有颜色和透明度的CSS图像叠加

我试图弄清楚我是否可以像图片一样添加叠加层,并在不添加背景颜色的情况下更改不透明度.我没有运气,所以我想我会在这里问.
我想用那种不透明度把它变成红色.这是我到目前为止所拥有的.

如果我必须调用overlay.png但我不知道它是否必要,我制作了一个覆盖它的图像.

img.highlighted {
   opacity:0.4;
}

基本上我想要做到这一点,但反过来,因为图像在徘徊时不会在徘徊时消除色调.
看看这里
http://jsbin.com/igahay/3011/edit

解决方法

如果你可以使用CSS3,请尝试使用CSS：filter ans special -webkit-filter
(这不是一个完全跨浏览器的解决方案……)

<img src="image.jpg" />
<style>
   img:hover {
      -webkit-filter: hue-rotate(240deg) saturate(3.3); 
   }
</style>

这里有一些在线演示：

> CSS Filter Effects
> Say Hello to Webkit Filters
> More on
google…

希望它有所帮助..或者至少指出你正确的方向.