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 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屋!