如何在 CSS 中降低图像亮度答案

【问题标题】：How to Decrease Image Brightness in CSS如何在 CSS 中降低图像亮度
【发布时间】：2012-07-17 03:15:07
【问题描述】：

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

【问题讨论】：

你可以使用属性不透明度
我用过，但它增加了亮度...
接受的答案效果很好，但还有一个新的 CSS 标准 filter 效果，您将来需要注意它。看我的回答。
@shady，您能否重新审视这个问题，以将提供涉及过滤器的解决方案的答案之一标记为正确。您标记为正确的答案将是 2006 年的方法。

标签： css

【解决方案1】：

您正在寻找的功能是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 将其淡出。效果将是后面的图像变暗。

终于可以查看filterhere的浏览器支持了。

【讨论】：

这也适用于video 标签。

【解决方案2】：

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

【讨论】：

不透明度不会使任何东西变亮或变暗。它改变了对象的透明度。这是否具有使某些东西更亮或更暗的效果将取决于您正在更改其不透明度的项目背后的背景颜色。与你所说的相反，如果你把它放在黑色背景上，你可以通过增加不透明度来使它变暗。黑色背景上的 99% 透明图像将显示为几乎黑色。因此，我不明白为什么需要单独的覆盖 div。您可以将其设置在黑色 BG 上。例如：jsbin.com/isemec/1/edit
@NickG 我说的是假设白色背景。您所做的与我的代码相同，只是我在图像顶部放置了一个半透明的黑色叠加层，并且您有一个不透明的黑色背景，顶部有一个半透明的图像。

【解决方案3】：

简而言之，将黑色放在图像后面，并降低不透明度。为此，您可以将图像包裹在 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>

Here 是一个 JSFiddle。

【讨论】：

【解决方案4】：

你可以使用：

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);

【讨论】：

这种“让我们抛出前缀以防万一”的策略是错误的。首先，如果 Opera 曾经支持它，它不会有-o-（Opera 现在使用 Webkit/Blink），第二，Firefox 直接跳转到不带前缀的filter，第三，你的顺序错误，不带前缀的应该是最后一个，第四个，IE 的-ms-filter 的语法不同（progid:DXImageTransform 等），第五个，Firefox 的语法不同，需要 SVG（See docs），第六个，新功能不太可能加上前缀，因为供应商意识到这是一个多么糟糕的想法
@CamiloMartin，那么你应该对这个问题提供更完整的答案，因为它还没有得到完全的回答。
-webkit-filter: Brightness() / -webkit-filter: contrast() 有效。这是这个问题的恰当答案。
你可以像这样在 sass mixin 中使用它：gist.github.com/johnferrie/3836468

【解决方案5】：

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

【讨论】：

请不要对多个问题发布完全相同的答案：它要么不适合所有人，要么问题是重复的，应该这样标记/关闭。

【解决方案6】：

我今天发现了这个。它真的帮助了我。 http://www.propra.nl/playground/css_filters/

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

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

【讨论】：

【解决方案7】：

如果你有背景图片，你可以这样做：在背景图片上设置一个 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>

【讨论】：

优秀。我需要一个解决方案来使背景图像变暗，而所有其他答案都会使整个 div 变暗。

【解决方案8】：

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

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

【讨论】：

【解决方案9】：

很明显，你需要做的就是这个

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

【讨论】：

【解决方案10】：

-webkit-filter: brightness(0.50);

我有这个很酷的解决方案： https://jsfiddle.net/yLcd5z0h/

【讨论】：

【解决方案11】：

如果您需要将黑色图像转换为白色，请尝试以下操作：

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

【讨论】：

【解决方案12】：

喜欢

.classname
{
 opacity: 0.5;
}

【讨论】：

谢谢，但增加亮度不会降低它！
这取决于背景颜色。
right @zgnilec 它取决于背景颜色......如果你把它设置为黑色，图像的亮度将会降低
这对于增加亮度超过 100% 不起作用，不透明度只能达到 1
作为一个不会说英语的人，我实际上想搜索“不透明性”并且无论如何都提出了这个答案。即使这个答案没有回答问题，很高兴知道opacity 增加了亮度。 ;)