css - 在任何背景上突出显示图像(悬停时)

Question

当您的鼠标指针悬停在某些图像上时，希望它们点亮(增加亮度)是很常见的。

我知道的一种适用于白色背景的技术是减少悬停时的不透明度，这实际上通过让更多的白色通过来增加亮度。问题显然是它只能在白色背景上工作。

是否有任何 CSS 可以添加到我的图像中

一个。为完全匹配的图像添加白色背景，以便在任何颜色背景上产生相同的发光效果，或者

在不添加白色背景或完全不使用不透明度的情况下实现相同的效果

Answer 1

用div封装你的图片

<div class="brightness">
    <img  src="test.jpg">
</div>

并应用好的CSS:

.brightness {
    background-color: white;
    display: inline-block;

}
.brightness img:hover {
    opacity: .5;
}

fiddle :http://jsfiddle.net/5yush/