CSS图像覆盖与颜色和透明度 [英] CSS image overlay with color and transparency

问题描述

我想弄清楚，如果我可以添加一个叠加到图像像色调和更改不透明度，而不添加背景颜色。我没有运气，所以我想我会在这里问。

我想让它变成红色的不透明。 这是我有的远。

I am trying to figure out if I can add an overlay to an image like a tint and change the opacity without adding background color. I had no luck so I thought I would ask here.
I would like to make it red with that opacity. here is what I have so far.

如果我打电话给overlay.png而不知道是否有必要，我制作了一张图片。

I made an image to overlay it if I have to called overlay.png but don't know if its necessary.

img.highlighted {
   opacity:0.4;
}

基本上我想这样做，但是相反，为了图像色调，在悬停时取走色调。

在此查看

http：// jsbin.com/igahay/3011/edit

Basically I want to do this but reverse, for image to tint when hovered not to take the tint away when hovered.
check it out here
http://jsbin.com/igahay/3011/edit

推荐答案

如果您可以使用CSS3，请尝试使用 CSS：filter ans special -webkit-filter

^{（这不是一个完全的跨浏览器解决方案...还有！）}

If you can use CSS3, try with CSS:filter ans specially -webkit-filter
^{(It's not a fully cross-browser solution... yet!)}

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

这里有几个在线演示：

• CSS滤镜效果


• 向Webkit过滤器问好 li>
  
• 更多
  google ...

• CSS Filter Effects
• Say Hello to Webkit Filters
• More on google...

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

Hope it's help.. or at least point you in the right direction.

这篇关于CSS图像覆盖与颜色和透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！