How to Decrease Image Brightness in CSS

by

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.

More Related Contents:

  1. difference between div and span in simple language [duplicate]
  2. Adding a styled CSS button
  3. How can I make Bootstrap columns all the same height?
  4. How to identify unused CSS definitions from multiple CSS files in a project
  5. How does the CSS Block Formatting Context work?
  6. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  7. Any recommendations for a CSS minifier? [closed]
  8. :first-child not working as expected
  9. Is the viewport meta tag really necessary?
  10. How to create color shades using CSS variables similar to darken() of Sass?
  11. Styling Google Maps InfoWindow
  12. Ordering of vendor-specific CSS declarations
  13. Using CSS transitions in CSS Grid Layout
  14. Have a variable in images path in Sass?
  15. How to use Apple’s new San Francisco font on a webpage
  16. How do I remove blue “selected” outline on buttons?
  17. How to create an irregular square shape in css?
  18. How to make Google Fonts work in IE?
  19. Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
  20. CSS: How to align vertically a “label” and “input” inside a “div”?
  21. LESS mixin a variable class name
  22. Media Query grouping instead of multiple scattered media queries that match
  23. How to style the UL list to a single line
  24. Align button at the bottom of div using CSS
  25. text flowing out of div
  26. Can I set the height of a div based on a percentage-based width? [duplicate]
  27. Is it bad practice to prefix single lines of CSS with // as a personal comment style?
  28. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  29. Ellipsis in flexbox container [duplicate]
  30. CSS Double Border with outer border thicker than inner border

Leave a Comment