如何降低CSS中的图像亮度
我想在CSS中降低图像亮度…我search了很多，但我得到的是改变不透明度…这是使图像更加明亮…任何人都可以帮助我吗？
您正在寻找的function是filter 。 它能够做一系列的图像效果，包括亮度：
#myimage { filter: brightness(50%); }
你可以在这里find一个有用的文章： 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的function。 它是可用的，但大量的浏览器不支持它，那些支持它的将需要一个供应商的前缀（即-webkit-filter: ，- -moz-filter等）。
也可以使用SVG做这样的滤镜效果。 SVG对这些效果的支持已经被很好的build立和广泛的支持（CSS滤镜规范已经从现有的SVG规范中获得了）
另外请注意，这不会与旧版本的IE中可用的专有filter风格相混淆（尽pipe当新样式放弃其供应商前缀时，我可以预测名称空间冲突的问题）。
如果这些function都不适用于您，您仍然可以使用现有的opacityfunction，但不是您所想的方式：只需使用纯色的深色创build一个新的元素，将其放置在图像的顶部，然后使用淡入淡出opacity 。 效果将会是背后的形象。
希望有所帮助。
OP想要降低亮度，而不是增加亮度。 不透明使图像看起来更亮，而不是更暗。
你可以通过在图像上覆盖一个黑色的div来设置该div的不透明度。
<style> #container { position: relative; } div.overlay { opacity: .9; background-color: black; position: absolute; left: 0; top: 0; height: 256px; width: 256px; } </style> Normal:<br /> <img src="http://i.imgur.com/G8eyr.png"> <br /> Decreased brightness:<br /> <div id="container"> <div class="overlay"></div> <img src="http://i.imgur.com/G8eyr.png"> </div>
DEMO
总之，把黑色放在图像后面，降低透明度。 你可以通过将图像包装在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>
这是一个JSFiddle。
你可以使用：
filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%);
使用CSS3，我们可以轻松调整图像。 但请记住，这不会改变图像。 它只显示调整后的图像。
请参阅以下代码以获取更多详细信息
要使图像变灰：
img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); }
给一个棕褐色的外观：
img { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); }
调整亮度：
img { -webkit-filter: brightness(50%); -moz-filter: brightness(50%); }
调整对比度：
img { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); }
模糊图像：
img { -webkit-filter: blur(10px); -moz-filter: blur(10px); }
我今天find了 这真的帮了我。 http://www.propra.nl/playground/css_filters/
所有你需要的是添加到您的CSS样式：
div {-webkit-filter: brightness(57%)}
您可以使用cssfilter，下面是web-kit的示例。 请看这个例子： http : //jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
我有这个很酷的解决scheme： https ： //jsfiddle.net/yLcd5z0h/
喜欢
.classname { opacity: 0.5; }
你不能用CSS做。 但是可以用Javascript和HTML5来完成
图像亮度与html5 / CSS / JS
