我尝试使用如下背景属性为图像着色：
.image-holder:hover {
opacity: 1;
transition: opacity 1s,background 1s;
background: #EBEFF7;
}
.image-holder {
height: 250px;
width: 200px;
opacity: 0.5;
transition: opacity 1s,background 1s;
}
<div class="image-holder"> <img src="https://dummyimage.com/200x200/fff/000000.png" /> </div>
http://jsfiddle.net/6ELSF/1047/
但是图像并没有像预期的那样“着色”.
在悬停时它看起来像这样：
但我希望它看起来像这样：
我试图测试一些我发现的关于图像叠加的解决方案但是在我的例子中都没有.
如何以最简单的方式完成这项工作？
解决方法
使用：在选择器之前,您可以使用不同的颜色着色图像
.image-holder {
height: 200px;
width: 200px;
position:relative;
}
.image-holder:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,255,0.5);
transition: all .3s linear;
}
.image-holder:hover:before {
background: none;
}
<div class="image-holder">
<img src="http://lorempixel.com/200/200" />
</div>
