How to Decrease Image Brightness in CSS
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.
How to update bright value in css filter using javascript without removing other filter attributes.?
It's easier to combine both values in a single event. Simply add .slider
class to both sliders.
$('.slider').on('input', function () {
var bright = $('.brightness').val();
var contrast = $('.contrast').val();
var selectedItem = document.getElementsByClassName('box')[0];
selectedItem.style.filter = "contrast("+contrast+"%) " + "brightness("+bright+"%)";
});
This works with both brightness and contrast.
Adjust leaflet map's brightness using filter css property
Here's one way of doing it:
HTML
<body>
<input type="range" min="0" max="200" value="0" class="slider" id="brightness-slider">
<div id="map"></div>
</body>
JavaScript
var mymap = L.map('map').setView([51.505, -0.09], 13);
var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mymap);
tileLayer.getContainer().style.filter = 'brightness(0%)';
var slider = document.getElementById('brightness-slider');
slider.addEventListener('input', function(e) {
var value = e.target.value;
tileLayer.getContainer().style.filter = 'brightness(' + value + '%)';
});
Try it out in this JSBin.
Related Topics
Horizontal Submenu for a Vertical Main Menu Using Bootstrap
How to Hide or Show Content with CSS Depending on Screen Size
Apply Different Styles to Input Text Field When Empty (Using CSS)
Setting Font Color of <A> Inside a Li Tag
Border-Radius on <Th>. No Border Rounding
How to Stack Two Arrow Images (Upvote/Downvote) on Top of Eachother Using CSS
Right-Align The Contents of a Facebook Like-Button Iframe
CSS Make Background-Image Use Font Character
How to Add Focus to a Table Row <Tr>
CSS Background Image Before and After H1 Tag
Primefaces Datatable Selectcheckboxmenu Filter Formatting Issue
Zurb Foundation - Many Duplicate CSS Entries
Align Text with Bottom as It Comes in During a Chat
Float:Right Not Floating All The Way to The Right
Margin-Top Under a Floated Div CSS
Bootstrap Carousel Caption Top Alignment