Best IT Recipes

How to reduce image brightness in CSS

I want to reduce the brightness of the image in CSS ... I was looking for alot, but all I get is to change the opacity ... and make the image brighter ... can someone help me?

+74
css css3
Jul 18 '12 at 6:22
source share
10 answers

The function you are looking for is filter . It is capable of performing a number of image effects, including brightness:

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

Here you can find a useful article: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

Another: http://davidwalsh.name/css-filters

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

Note that this most recently appeared in CSS as a function. It is available, but a large number of browsers are not yet supported there, and those that support it will require a vendor prefix (i.e. -webkit-filter: -moz-filter , etc.).

It is also possible to use filter effects such as SVG. SVG support for these effects is well established and widely supported (CSS filter specifications are taken from existing SVG specifications)

Also note that this should not be confused with the proprietary filter style, available in older versions of IE (although I can predict a problem with namespace conflict when the new style resets the provider prefix).

If this does not work for you, you can still use the existing opacity function, but not in the way you think: just create a new element with a dark dark color, place it on top of your image, and reduce it using opacity . The effect will be due to dimming.

Hope this helps.

+114
Jul 18 '12 at 6:30
source share

OP wants to reduce brightness, not increase it. Opacity makes the image brighter, not darker.

You can do this by placing a black div on 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

+30
Jul 18 2018-12-18T00:
source share

In short, put black behind the image and omit opactiy. You can do this by wrapping the image in 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 the JSFiddle.

+17
Jul 18 '12 at 6:28
source share

You can use:

 filter: brightness(50%); -webkit-filter: brightness(50%); -moz-filter: brightness(50%); -o-filter: brightness(50%); -ms-filter: brightness(50%);
+15
Sep 03 '13 at 0:41
source share

With CSS3 we can easily customize the image. But remember that this does not change the image. It displays only the adjusted image.

See the following code for more details.

To make the image gray:

 img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); }

To view a sepia view:

  img { -webkit-filter: sepia(100%); -moz-filter: sepia(100%); }

To adjust the brightness:

  img { -webkit-filter: brightness(50%); -moz-filter: brightness(50%); }

To adjust the contrast:

  img { -webkit-filter: contrast(200%); -moz-filter: contrast(200%); }

To blur the image:

  img { -webkit-filter: blur(10px); -moz-filter: blur(10px); }
+6
Jan 19 '14 at 12:23
source share

I found it today. It really helped me. http://www.propra.nl/playground/css_filters/

All you need to do is add this to your css style .:

 div {-webkit-filter: brightness(57%)}
+4
Dec 07 '14 at 18:04
source share

You can use the css filters below and an example for a web set. look at this example: http://jsfiddle.net/m9sjdbx6/4/

  img { -webkit-filter: brightness(0.2);}
+2
Oct 18 '14 at 19:00
source share
 -webkit-filter: brightness(0.50);

I have this cool solution: https://jsfiddle.net/yLcd5z0h/

+1
Mar 28 '15 at 2:31
source share

how

 .classname { opacity: 0.5; }
-one
Jul 18 '12 at 6:25
source share

You cannot do this with CSS. But this can be done using Javascript and HTML5

Image brightness using html5 / CSS / JS

-3
Jul 18 '12 at 6:25
source share


More articles:


All Articles