我试图弄清楚是否可以在图像上添加叠加层，例如色调并在不添加背景颜色的情况下更改不透明度。我没有运气，所以我想我会在这里问。
我想用那种不透明度把它变成红色。这是我到目前为止所拥有的。
如果我必须调用overlay.png，我制作了一个图像来覆盖它，但不知道是否有必要。
img.highlighted {
opacity:0.4;
}
基本上我想这样做但相反，当悬停时图像会着色而不是在悬停时将色调带走。
在这里查看
http://jsbin.com/igahay/3011/edit
它不是完全跨浏览器的解决方案，但必须在大多数现代浏览器中运行良好。
<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>
外部演示游乐场
内部演示片段 （来源：simpl.info）
#container {
text-align: center;
}
.blur {
filter: blur(5px)
}
.grayscale {
filter: grayscale(1)
}
.saturate {
filter: saturate(5)
}
.sepia {
filter: sepia(1)
}
.multi {
filter: blur(4px) invert(1) opacity(0.5)
}<div id="container">
<h1><a href="https://simpl.info/cssfilters/" title="simpl.info home page">simpl.info</a> CSS filters</h1>
<img src="https://simpl.info/cssfilters/balham.jpg" alt="No filter: Balham High Road and a rainbow" />
<img class="blur" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur filter: Balham High Road and a rainbow" />
<img class="grayscale" src="https://simpl.info/cssfilters/balham.jpg" alt="Grayscale filter: Balham High Road and a rainbow" />
<img class="saturate" src="https://simpl.info/cssfilters/balham.jpg" alt="Saturate filter: Balham High Road and a rainbow" />
<img class="sepia" src="https://simpl.info/cssfilters/balham.jpg" alt="Sepia filter: Balham High Road and a rainbow" />
<img class="multi" src="https://simpl.info/cssfilters/balham.jpg" alt="Blur, invert and opacity filters: Balham High Road and a rainbow" />
<p><a href="https://github.com/samdutton/simpl/blob/gh-pages/cssfilters" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a></p>
</div>笔记
资源：
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;
}
如果您想与您展示的相反，请考虑这样做：
.tint:hover:before {
background: rgba(0,0,250, 0.5);
}
.t2:before {
background: none;
}
再看第二张图的效果。
它应该看起来像这样吗？
像这样的东西？http://codepen.io/Nunotmp/pen/wKjvB
您可以添加一个空div并使用绝对定位。
您是否尝试过Webkit 过滤器？
您不仅可以控制不透明度，还可以控制颜色、亮度、亮度和其他属性：