Question

我想降低CSS中的图像亮度。我搜索了很多，但我所拥有的只是如何改变不透明度，但这使图像更加明亮。有谁可以帮助我？

Answer 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等。 / p>

也可以使用SVG进行这样的滤镜效果。 SVG对这些效果的支持已经很好地建立并得到广泛支持（CSS过滤器规范取自现有的SVG规范）

另请注意，这不应与旧版IE中可用的专有filter样式混淆（尽管我可以预测新样式丢弃其供应商前缀时命名空间冲突的问题）。

如果这些都不适合你，你仍然可以使用现有的opacity功能，但不是你想的方式：只需创建一个深色的新元素，将其置于顶部你的图像，并使用opacity淡出。影响将是暗淡背后的形象。

最后，您可以查看filter here的浏览器支持。

希望有所帮助。

Answer 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

Answer 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。

Answer 4

您可以使用：

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

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

Answer 6

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

您只需将此添加到您的css样式中。：

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

Answer 7

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

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

Answer 8

-webkit-filter: brightness(0.50);

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

Answer 9

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

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

Answer 10

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

Answer 11

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

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

Answer 12

像

.classname
{
 opacity: 0.5;
}

如何降低CSS中的图像亮度

12 个答案: