CSS中如何降低图像亮度

我想降低CSS中的图像亮度。我搜索了很多，但我得到的只是关于如何改变不透明度，但这会使图像更明亮。 有人能帮我吗？

比如

.classname
{
 opacity: 0.5;
}

---

简而言之，在图像后面放置黑色，并降低不透明度。可以通过将图像包装在div中，然后降低图像的不透明度来实现这一点

例如：

.img包装{
背景：黑色；
显示：内联块；
线高：0；
}
.img wrap>img{
不透明度：0.8；
}

---

是一个JSFIDLE。

您正在寻找的功能是

过滤器。它能够产生一系列图像效果，包括亮度：

#myimage {
    filter: brightness(50%);
}

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

您可以在此处找到一篇关于它的有用文章：

另一个：

最重要的是，W3C规范：

请注意，这是最近才作为一项功能出现在CSS中的东西。它是可用的，但是很多浏览器还不支持它，而那些支持它的浏览器将需要供应商前缀（例如
-webkit-filter:
，
-moz-filter
，等等）

也可以使用SVG实现类似这样的过滤效果。SVG对这些效果的支持已经建立并得到广泛支持（CSS过滤器规范取自现有的SVG规范）

还请注意，这不能与旧版本IE中可用的专有
过滤器
样式混淆（尽管我可以预测，当新样式删除其供应商前缀时，名称空间冲突会出现问题）

如果这些都不适用于您，您仍然可以使用现有的
不透明度
功能，但不是您的思维方式：只需创建一个具有纯色深色的新元素，将其放置在图像顶部，然后使用
不透明度
将其淡出。效果将是后面的图像变暗

最后，您可以检查
过滤器的浏览器支持
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>


#容器{
位置：相对位置；
}
分区覆盖{
不透明度：.9；
背景色：黑色；
位置：绝对位置；
左：0；顶部：0；高度：256px；宽度：256px；
}
正常：



亮度降低：


您可以使用：

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%);
}

要调整亮度，请执行以下操作：

#myimage {
    filter: brightness(50%);
}

 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);
  }

您可以使用下面的css过滤器和web工具包示例。请看这个例子：

我今天发现了这个。它真的帮助了我

您只需将其添加到css样式中即可：

div {-webkit-filter: brightness(57%)}

我有一个很酷的解决方案：
如果需要将黑色图像转换为白色，请尝试以下操作：

.classname{
    filter: brightness(0) invert(1);
}

如果有背景图像，可以执行以下操作：在背景图像上设置rgba（）渐变


.img\u容器{
浮动：左；
宽度：300px；
高度：300px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px实心#fff；
}
.原图{
背景：url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.形象鲜明{
背景：线性渐变（0度，rgba（0，0，0，0.5），rgba（0，0，0，0.5）），/*顶部的渐变，根据您的喜好调整颜色和不透明度*/
网址(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}
.img_集装箱p{
颜色：#fff；
字号：28px；
}

正常的

低亮度

很明显，您需要做的就是

<img src="https://rb.gy/njdqof" class="IMG">


您可以使用属性opacity，我使用了它，但它增加了亮度…公认的答案很好，但还有一个新的CSS标准
过滤器
效果，您希望在将来了解它。请看我的答案。@shady，您能否再次访问此问题，以将提供涉及过滤器的解决方案的其中一个答案标记为正确答案。您标记为正确的答案将是在2006年这样做的方式。谢谢，但增加亮度不会降低它！！它取决于背景色。右@zgnilec它取决于背景色。。。如果你把它设为黑色，图像的亮度会降低。这不适用于将亮度提高100%以上，不透明度只能达到1。作为一个非英语国家的人，我实际上想搜索“不透明度”，并得到了这个答案。即使这个答案不能回答这个问题，知道
不透明度
增加亮度也很好不透明度不会使任何东西变亮或变暗。它会更改对象的透明度。这是否有使某物变亮或变暗的效果将取决于您正在更改不透明度的项目背后的背景颜色。与你所说的相反，如果你把它放在黑色背景上，你可以通过增加不透明度使它变暗。黑色背景上99%透明的图像将显示为几乎黑色。因此，我不明白为什么需要一个单独的覆盖div。你可以把它设置在黑色背景上。例如：@NickG我说假设背景是白色的。你所做的和我的代码是一样的，只有我把一个半透明的黑色覆盖在图片的顶部，你有一个不透明的黑色背景，上面有一个半透明的图片。请不要发布多个问题的完全相同的答案：这不是一个适合所有人的答案，或者问题是重复的，因此应该标记/关闭。这项政策“让我们抛出前缀以防万一”是错误的。首先，如果Opera支持它，它就不会有
-o-
（Opera现在使用Webkit/Blink），其次，Firefox直接跳入了无前缀的
过滤器
/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/

.IMG {
  filter: brightness(20%);
}