Menu
Under Picture Tools, on the Format tab, in the Adjust group, click Brightness. Click the brightness percentage that you want. To-fine tune the amount of brightness, click Picture Corrections Options, and then move the Brightness slider, or enter a number in the box next to the slider.
CSS has a filter property that can be used with a variety of filter functions. One of them is the brightness() filter. By feeding a percentage less than 100% to brightness() , the target element will be made darker. Inversely, feeding a percentage greater than 100% to brightness() will make the element brighter.
The brightness() CSS function applies a linear multiplier to the input image, making it appear brighter or darker. Its result is a <filter-function> .
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.
OP wants to decrease brightness, not increase it. Opacity makes the image look brighter, not darker.
You can do this by overlaying a black div over the image and setting the opacity of that 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
In short, place black behind the image, and lower the opactiy. You can do this by wrapping the image within a div, and then lowering the opacity of the image.
For example:
<!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 is a JSFiddle.
You could use:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With