The feature you're looking for is filter
. It is capable of doing a range of image effects, including brightness:
#myimage {
filter: brightness(50%);
}
You can find a helpful article about it here: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
An another: http://davidwalsh.name/css-filters
And most importantly, the W3C specs: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
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).
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)
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).
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.
Finally you can check the browser support of filter
here.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…