如何降低CSS中的图像亮度 [英] How to Decrease Image Brightness in CSS

问题描述

我想减少CSS中的图像亮度...我搜索了很多，但我得到的是改变不透明度...这使得图像更亮度...
任何一个可以帮助我？ / p>

I want to decrease image brightness in CSS ... I searched alot but all I get is to change the opacity ... and that's make the image more brightness ... can any one help me ?

推荐答案

您要查找的功能是过滤器。它能够做一系列的图像效果，包括亮度：

The feature you're looking for is filter. It is capable of doing a range of image effects, including brightness:

#myimage {
    filter: brightness(50%);
}

您可以在这里找到有用的文章： http://www.html5rocks.com/en/tutorials/filters/understanding-css/

You can find a helpful article about it here: 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

And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

注意，这只是最近才将CSS作为一个特性。它是可用的，但是大量的浏览器不会支持它，而支持它的那些将需要一个供应商前缀（即 -webkit-filter： ， -moz-filter 等）。

Note this is something that's only very recently coming into CSS as a feature. It is available, but a large number of browsers out there won't support it yet, and those that do support it will require a vendor prefix (ie -webkit-filter:, -moz-filter, etc).

也可以使用SVG来实现这样的滤镜效果。 SVG对这些效果的支持是完全建立和广泛支持的（CSS过滤器规范是从现有的SVG规范中获取的）

It is also possible to do filter effects like this using SVG. SVG support for these effects is well established and widely supported (the CSS filter specs have been taken from the existing SVG specs)

还要注意，这不要与专用的过滤器样式可用在旧版本的IE（虽然我可以预测命名空间冲突的问题，当新式下降其供应商前缀）。

Also note that this is not to be confused with the proprietary filter style available in old versions of IE (although I can predict a problem with the namespace clash when the new style drops its vendor prefix).

如果没有一个适用于你，你仍然可以使用现有的 opacity 功能，但不是你的想法：一个具有纯黑色的新元素，将其放在图像的顶部，并使用 opacity 淡出。

If none of that works for you, you could still use the existing opacity feature, but not the way you're thinking: simply create a new element with a solid dark colour, place it on top of your image, and fade it out using opacity. The effect will be of the image behind being darkened.

希望有帮助。

这篇关于如何降低CSS中的图像亮度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！