如何降低CSS中的图像亮度

我想降低CSS中的图像亮度。我搜索了很多，但我得到的只是如何改变不透明度，但这使得图像更加明亮。任何人都可以帮助我吗？如何降低CSS中的图像亮度

2012-07-18 Shadi

你可以使用属性不透明度 – 2012-07-18 06:24:25

我用它，但它增加了亮度... – Shadi 2012-07-18 06:27:33

接受的答案效果很好，但也有一个新的CSS标准'过滤器'效果，你会想知道未来。看到我的答案。 – Spudley 2012-07-18 06:56:49

119

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

希望有所帮助。

来源

2012-07-18 06:30:16 Spudley

这是正确的答案 – 2015-03-10 04:34:55

-1

像

.classname 
{ 
opacity: 0.5; 
}

来源

2012-07-18 06:25:23

谢谢，但增加亮度不会降低它！ – Shadi 2012-07-18 06:28:09

@shady：增加不透明度，也请访问链接http://imagecss.com/opacity.html – 2012-07-18 06:31:46

这取决于背景颜色。 – zgnilec 2012-07-18 06:34:15

总之，把黑的形象背后，并降低opactiy。您可以通过将图像包装在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。

来源

2012-07-18 06:28:43 JL235

这是工作得很好...非常感谢 – Shadi 2012-07-18 06:47:03

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

来源

2012-07-18 06:33:23 sachleen

1这个想法。 ..：P – 2012-07-18 06:36:02

+22

不透明度不会使任何更亮或更暗。它改变了对象的透明度。无论这是否具有让某物更亮或更暗的效果取决于您改变不透明度的物品背后的背景颜色。与您所说的相反，如果将其放在黑色背景上，可以通过增加不透明度来使其更暗。黑色背景上的99％透明图像将显示为几乎黑色。因此，我不明白为什么需要单独的覆盖div。你可以将它设置在黑色的BG上。例如：http://jsbin.com/isemec/1/edit – NickG 2012-11-02 10:56:03

@NickG我说，假设白色背景。你所做的与我的代码是一样的，只有我在图像上放置了一个半透明的黑色覆盖层，并且你有一个不透明的黑色背景，顶部有一个半透明的图像。 – sachleen 2012-11-02 16:31:48

你可以使用：

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

来源

2013-09-03 00:41:08

这个“让我们抛出前缀以防万一”的策略是错误的。首先，如果Opera支持它，它将不会有'-o-'（Opera现在使用Webkit/Blink），其次，Firefox直接跳转到没有前缀的'filter'，第三，您的订单错误，没有前缀应该是最后一个，第四，IE的'-ms-filter'的语法是不同的（'progid：DXImageTransform'等），第五，Firefox的语法不同，需要SVG（[docs]]（https：// developer .mozilla.org/en-US/docs/Web/CSS/filter＃brightness（））），第六，新功能不可能以前缀为前缀，因为供应商意识到这个想法有多么糟糕 – 2015-03-19 03:46:31

@CamiloMartin，那么你应该为这个问题提供了一个更完整的答案，因为它还没有完全回答。 – 2015-03-24 01:48:57

-webkit-filter：brightness（）/ -webkit-filter：contrast（）起作用。对于这个问题，这是一个合适的答案。 – Shilpa 2016-08-24 07:42:07

随着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-19 12:23:56

请不要在多个问题上发布完全相同的答案：它可能不适合所有问题或问题是重复的，应该标记/关闭。 – kleopatra 2014-01-19 13:03:17

这将是一个很好的候选人的正确答案。 – 2015-03-24 01:54:15

可以使用CSS过滤器，下面和实施例用于web的试剂盒。请看下面的例子：http://jsfiddle.net/m9sjdbx6/4/

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

来源

2014-10-18 19:00:38 GibboK

我今天找到了。它真的帮助了我。 http://www.propra.nl/playground/css_filters/

所有你需要的是添加到您的CSS样式：

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

来源

2014-12-07 18:04:53

-webkit-filter: brightness(0.50);

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

来源

2015-03-28 02:31:47

，如果你试试这个需要将黑色图像转换为白色：

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

来源

2018-02-12 18:53:18 Rizo

如何降低CSS中的图像亮度

回答

相关问题