120

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

4

12 回答 12

198

您正在寻找的功能是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 这里查看浏览器支持。

于 2012-07-18T06:30:16.010 回答
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>

演示

于 2012-07-18T06:33:23.300 回答
18

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

于 2012-07-18T06:28:43.630 回答
15

你可以使用：

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
于 2013-09-03T00:41:08.400 回答
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);
  }
于 2014-01-19T12:23:56.823 回答
3

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

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

div {-webkit-filter: brightness(57%)}
于 2014-12-07T18:04:53.073 回答
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>

于 2019-03-11T09:22:56.530 回答
1

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

    img { -webkit-filter: brightness(0.2);}
于 2014-10-18T19:00:38.417 回答
1

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

<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%);
}
于 2021-03-17T21:06:25.550 回答
0 
-webkit-filter: brightness(0.50);

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

于 2015-03-28T02:31:47.057 回答
0

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

.classname{
    filter: brightness(0) invert(1);
}
于 2018-02-12T18:53:18.557 回答
-4

像

.classname
{
 opacity: 0.5;
}
于 2012-07-18T06:25:23.227 回答