如何降低CSS中的图像亮度

105

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

css

— 沙迪
source

您可以使用属性不透明度

— Satinder singh 2012年

我用了它，但是它增加了亮度...

— Shadi 2012年

可接受的答案效果很好，但是还有一个新的CSS标准filter效果，您将来需要注意。看我的答案。

— Spudley 2012年

1

@shady，能否请您重新回答该问题，以将提供涉及过滤器的解决方案的答案之一标记为正确。您标记为正确的答案将是2006

— 方式

175

您要寻找的功能是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规范）

还要注意，不要将它与filter旧版本的IE中可用的专有样式相混淆（尽管我可以预测到，当新样式删除其供应商前缀时，名称空间冲突会引起问题）。

如果这些都不适合您，您仍然可以使用现有opacity功能，但不能使用您正在考虑的方式：只需创建一个具有纯黑色的新元素，将其放在图像上方，然后使用淡化opacity。效果将是变暗的图像。

最后，您可以在filter 此处检查浏览器支持。

— 斯普德利
source

32

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>

演示

— 萨克林
source

24

不透明度不会使任何东西变亮或变暗。它改变了对象的透明度。它是否具有使某东西变亮或变暗的效果，将取决于您要更改其不透明度的项目后面的背景颜色。与您所说的相反，如果将不透明性放在黑色背景上，则可以通过增加不透明性来使颜色变暗。黑色背景上的99％透明图像将显示为几乎黑色。因此，我不明白为什么需要单独的overlay div。您可以将其设置在黑色BG上。例如：jsbin.com/isemec/1/edit

— NickG

@NickG我说的是假设白色背景。您所做的与我的代码相同，只是我在图像顶部放了一个半透明的黑色覆盖层，而您有一个不透明的黑色背景，顶部有一个半透明的图像。

— sachleen

17

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

— JL235
source

15

您可以使用：

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

— 纳霍米·阿蒂亚斯（Nahomy Atias）
source

9

这种“以防万一，以防万一”的政策是错误的。首先，如果Opera曾经提供支持，Opera将不再支持-o-（现在，Opera使用Webkit / Blink），其次，Firefox会直接跳入非前缀filter，第三，您输入的顺序有误，非前缀应该是最后一个，第四， IE的语法-ms-filter不同（progid:DXImageTransform，等等），第五，Firefox的语法不同，需要SVG（请参阅文档），第六，新功能不太可能加上前缀，因为供应商意识到它的主意是多么糟糕

— Camilo Martin

5

@CamiloMartin，那么您应该为该问题提供更完整的答案，因为尚未完全回答。

— Wes模式

-webkit-filter：亮度（）/ -webkit-filter：对比度（）起作用。这是该问题的恰当答案。

— 希尔帕

您可以像这样在Sass

— Erez Lieberman

6

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

— 拉吉·沙玛（Raj Sharma）
source

1

请不要对多个问题发布完全相同的答案：这可能不适合所有问题，或者这些问题是重复的，应如此标记/结束。

— kleopatra 2014年

3

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

您需要做的就是将其添加到CSS样式中：

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

— 运动精神
source

2

如果您有背景图像，则可以执行以下操作：在背景图像上设置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>

展开摘要

— 塞巴斯蒂安·吉奎尔
source

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

— nuander

1

您可以在下面以及网络工具包示例中使用css过滤器。请查看以下示例：http : //jsfiddle.net/m9sjdbx6/4/

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

— GibboK
source

0

-webkit-filter: brightness(0.50);

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

— Prashant Ghimire
source

0

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

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

— 里三
source

-3

喜欢

.classname
{
 opacity: 0.5;
}

— 萨特·辛格
source

谢谢，但是增加亮度不会减少它！

— 沙迪

这取决于背景颜色。

— 启示录

正确@zgnilec取决于背景颜色...如果将其设置为黑色，则图像的亮度将降低

— Shadi 2012年

这不能使亮度增加100％以上，不透明度最多只能达到1

— Javis Perez

作为一个不会说英语的人，我实际上想搜索“不透明”，并无论如何都提出了这个答案。即使此答案不能回答问题，也很高兴可以opacity增加亮度。;）