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

Question

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

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

img.highlighted {
   opacity:0.4;
}

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

Answer 1

如果您可以使用CSS3,请__CODE__特别尝试使用ans __CODE__
^{(它不是一个完全跨浏览器的解决方案......)}

<img src="image.jpg" />
<style>
    img:hover {
        /* Ch 23+, Saf 6.0+, BB 10.0+ */
        -webkit-filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
        /* FF 35+ */
        filter: hue-rotate(240deg) saturate(3.3) grayscale(50%);
    }
</style>

这里有一些在线演示:

• CSS滤镜效果
• 向Webkit过滤器问好
• 更多关于谷歌......

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

Answer 2

JSFiddle演示

HTML:

<div class="image-holder">
    <img src="http://codemancers.com/img/who-we-are-bg.png" />
</div>

CSS:

.image-holder {
    display:inline-block;
    position: relative;
}
.image-holder:after {
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: blue;
    opacity: 0.1;
}
.image-holder:hover:after {
    opacity: 0;
}