我想降低CSS中的图像亮度。我搜索了很多，但我只知道如何改变不透明度，但这会使图像更加明亮。有人能帮我吗？
您要查找的功能是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的浏览器支持。
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>
演示
简而言之，在图像后面放置黑色，并降低不透明性。可以通过将图像包装在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);
}
我今天发现了这个。它真的帮助了我。http://www.propra.nl/playground/css_filters/
您所需要的只是将其添加到您的css样式中。：
div {-webkit-filter: brightness(57%)}
如果你有背景图像，你可以这样做：在背景图像上设置rgba（）渐变。
.img_container {
float: left;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
border : 1px solid #fff;
}
.image_original {
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.image_brighness {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_container p {
color: #fff;
font-size: 28px;
}<div class="img_container image_original">
<p>normal</p>
</div>
<div class="img_container image_brighness ">
<p>less brightness</p>
</div>很明显，您所需要做的就是这个
<img src="https://rb.gy/njdqof" class="IMG">
CSS跟随
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/
.IMG {
filter: brightness(20%);
}
您可以使用css过滤器，下面是web工具包的示例。请看这个例子：http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
我有一个很酷的解决方案：https://jsfiddle.net/yLcd5z0h/
如果需要将黑色图像转换为白色，请尝试此操作：
.classname{
filter: brightness(0) invert(1);
}
类似
.classname
{
opacity: 0.5;
}