如何在CSS中降低图像亮度
我想在CSS中降低图像亮度。我搜索了很多，但我得到的只是关于如何改变不透明度，但这会使图像更亮。有人能帮我吗？
回答 10
Stack Overflow用户
发布于 2012-07-18 14:30:16
您正在寻找的功能是filter。它能够做一系列的图像效果，包括亮度：
#myimage {
filter: brightness(50%);
}你可以在这里找到一篇有用的文章：http://www.html5rocks.com/en/tutorials/filters/understanding-css/
另一个：http://davidwalsh.name/css-filters
最重要的是，W3C规范：https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
注意，这是最近才出现在CSS中的一个特性。它是可用的，但大量的浏览器还不支持它，而那些支持它的浏览器将需要一个供应商前缀(如-webkit-filter:，-moz-filter等)。
也可以使用SVG来实现这样的滤镜效果。SVG对这些效果的支持已经建立并得到了广泛的支持( CSS过滤器规范取自现有的SVG规范)
还要注意，这不能与旧版本IE中可用的专有filter样式混淆(尽管我可以预测当新样式丢弃其供应商前缀时，名称空间冲突会出现问题)。
如果这些对你都不起作用，你仍然可以使用现有的opacity功能，但不是你想的那样:只需创建一个深色纯色的新元素，将其放在图像上，然后使用opacity将其淡出。其效果将是图像后面的颜色变暗。
最后，您可以检查filter here对浏览器的支持。
Stack Overflow用户
发布于 2012-07-18 14:28:44
简而言之，将黑色放置在图像后面，并降低光学效果。您可以通过将图像包装在div中，然后降低图像的不透明度来实现此目的。
例如：
<!DOCTYPE html>
<style>
.img-wrap {
background: black;
display: inline-block;
line-height: 0;
}
.img-wrap > img {
opacity: 0.8;
}
</style>
<div class="img-wrap">
<img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>Here是一个JSFiddle。
Stack Overflow用户
发布于 2013-09-03 08:41:08
您可以使用：
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);https://stackoverflow.com/questions/11535392
复制相似问题