如何在 CSS 中降低图像亮度

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

229626 次浏览
小开

喜欢

.classname
{
opacity: 0.5;
}
小开

简而言之，在图像后面放置黑色，并降低不透明度。可以通过在 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。它能够做一系列的图像效果，包括亮度:

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

You can find a helpful article about it here: 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淡出。影响将是背后的图像被黑暗。

Finally you can check the browser support of filter 给你.

小开

OP wants to 减少 brightness, not increase it. Opacity makes the image look brighter, not darker.

可以通过在图像上覆盖一个黑色 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>

演示

小开

你可以用:

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

To give a sepia look:

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

你可以使用 css 过滤器，下面是 web-kit 的例子，请看这个例子: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}
小开

I found this today. It really helped me. http://www.propra.nl/playground/css_filters/

所有你需要的是添加到您的 css 样式:

div {-webkit-filter: brightness(57%)}
小开 
-webkit-filter: brightness(0.50);

I've got this cool solution: Https://jsfiddle.net/ylcd5z0h/

小开

如果你需要把黑色图像转换成白色，试试这个:

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

如果有背景图像，可以这样做: 在背景图像上设置 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%);
}

提交答案