如何在 CSS 中降低图像亮度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11535392/
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
How to Decrease Image Brightness in CSS
提问by Shadi
I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright. can anyone help me ?
我想降低 CSS 中的图像亮度。我搜索了很多，但我所知道的只是如何改变不透明度，但这会使图像更亮。谁能帮我 ？
回答by Spudley
The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:
您正在寻找的功能是filter. 它能够制作一系列图像效果，包括亮度：
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
您可以在此处找到有关它的有用文章：http: //www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
另一个：http: //davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
最重要的是，W3C 规范：https: //dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).
请注意，这是最近才作为一项功能进入 CSS 的东西。它是可用的，但大量的浏览器在那里将不会支持它，和那些支持它需要供应商名称（即-webkit-filter:，-moz-filter等）。
It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)
也可以使用 SVG 做这样的过滤效果。SVG 对这些效果的支持已经建立并得到广泛支持（CSS 过滤器规范取自现有的 SVG 规范）
Also note that this is not to be confused with the proprietary filterstyle available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).
另请注意，不要将这与filter旧版本 IE 中可用的专有样式混淆（尽管我可以预测当新样式删除其供应商前缀时命名空间冲突的问题）。
If none of that works for you, you could still use the existing opacityfeature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.
如果这些都不适合你，你仍然可以使用现有的opacity功能，但不是你想的那样：只需创建一个纯深色的新元素，将它放在你的图像顶部，然后使用opacity. 效果将是后面的图像变暗。
Finally you can check the browser support of filterhere.
最后你可以在filter这里查看浏览器支持。
回答by sachleen
OP wants to decreasebrightness, not increase it. Opacity makes the image look brighter, not darker.
OP 想降低亮度，而不是增加亮度。不透明度使图像看起来更亮，而不是更暗。
You can do this by overlaying a black div over the image and setting the opacity of that div.
您可以通过在图像上覆盖一个黑色 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>
回答by JL235
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
简而言之，在图像后面放置黑色，并降低不透明度。您可以通过将图像包裹在一个 div 中，然后降低图像的不透明度来实现。
For example:
例如：
<!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>
Hereis a JSFiddle.
这是一个 JSFiddle。
回答by Nahomy Atias
You could use:
你可以使用：
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
回答by Raj Sharma
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
使用 CSS3，我们可以轻松调整图像。但请记住，这不会改变图像。它只显示调整后的图像。
See the following code for more details.
有关更多详细信息，请参阅以下代码。
To make an image gray:
要使图像变灰：
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
给一个棕褐色外观：
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
调整亮度：
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
调整对比度：
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
要模糊图像：
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
回答by Spirit In Motion
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
我今天发现了这个。它真的帮助了我。http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
您所需要的只是将其添加到您的 css 样式中。：
div {-webkit-filter: brightness(57%)}
回答by GibboK
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
您可以使用下面的 css 过滤器和 web-kit 的示例。请看这个例子：http: //jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
回答by Sébastien Gicquel
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
如果你有背景图片，你可以这样做：在背景图片上设置一个 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>回答by Prashant Ghimire
-webkit-filter: brightness(0.50);
I've got this cool solution:https://jsfiddle.net/yLcd5z0h/
我有这个很酷的解决方案：https: //jsfiddle.net/yLcd5z0h/
回答by Rizo
try this if you need to convert black image into white:
如果您需要将黑色图像转换为白色，请尝试此操作：
.classname{
filter: brightness(0) invert(1);
}
