CSS 在任何背景上突出显示图像（悬停时）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23469332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight images (on hover) on any background
提问by Marco Prins
It is quite common to want certain images to be lit up (increase brightness) when your mouse pointer hovers over them.
当您的鼠标指针悬停在某些图像上时，希望它们点亮（增加亮度）是很常见的。
One technique that I know of, that works on white backgrounds is to reduce opacity on hover, which in effect increases brightness by letting more white through. The problem is obviously that it will only work on a white background.
我知道的一种适用于白色背景的技术是减少悬停时的不透明度，这实际上通过让更多的白色通过来增加亮度。问题显然是它只能在白色背景上工作。
Is there any CSS that I can add to my images that will either
是否有任何 CSS 可以添加到我的图像中
a. Add a white background to the images which fits exactly, so that the same light-up effect will take place on any color background, or
一种。为完全适合的图像添加白色背景，以便在任何颜色背景上都会发生相同的点亮效果，或
b. Achieve the same effect without adding white backgrounds or using opacity at all
湾 无需添加白色背景或完全不使用不透明度即可实现相同的效果
回答by ekans
encapsule your image with a div
用 div 封装你的图像
<div class="brightness">
<img src="test.jpg">
</div>
and apply the good css :
并应用好的 css ：
.brightness {
background-color: white;
display: inline-block;
}
.brightness img:hover {
opacity: .5;
}
fiddle: http://jsfiddle.net/5yush/
回答by Kondax Design
image:hover { filter: brightness(50%); }
回答by Yovav
Add this class to any image
将此类添加到任何图像
.image-hover-highlight {
-webkit-transition: all 0.50s;
transition: all 0.50s;
&:hover {
border: 1px solid gray;
filter: brightness(130%);
-webkit-filter: brightness(130%);
-moz-filter: brightness(130%);
-o-filter: brightness(130%);
-ms-filter: brightness(130%);
-webkit-transition: all 0.50s;
transition: all 0.50s;
}
}回答by valerio0999
would something like this work for you? http://jsfiddle.net/omegaiori/teAP7/1/
这样的事情对你有用吗？http://jsfiddle.net/omegaiori/teAP7/1/
in order to have this working you have to wrap your image in a div
为了让这个工作，你必须将你的图像包装在一个 div 中
.img-cont {
background:white;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
margin:30px auto 0;
width:300px;
}
and have your image widthset to 100%
并将您的图像width设置为100%
you can change the paddingvalue as you wish, the box will always have the same size thanks to his box-sizingproperty
您可以根据需要更改padding值，由于他的box-sizing属性，盒子将始终具有相同的大小
