I want to decrease image brightness in CSS. I searched a lot but all I've got is about how to change the opacity, but that makes the image more bright. can anyone help me ?
This question is related to
css
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%);
-webkit-filter: brightness(0.50);
I've got this cool solution: https://jsfiddle.net/yLcd5z0h/
If you have a background-image, you can do this : Set a rgba() gradient on the background-image.
.img_container {_x000D_
float: left;_x000D_
width: 300px;_x000D_
height: 300px;_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
align-items: center;_x000D_
border : 1px solid #fff;_x000D_
}_x000D_
_x000D_
.image_original {_x000D_
background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);_x000D_
}_x000D_
_x000D_
.image_brighness {_x000D_
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */_x000D_
url(https://i.ibb.co/GkDXWYW/demo-img.jpg);_x000D_
}_x000D_
_x000D_
.img_container p {_x000D_
color: #fff;_x000D_
font-size: 28px;_x000D_
}
_x000D_
<div class="img_container image_original">_x000D_
<p>normal</p>_x000D_
</div>_x000D_
<div class="img_container image_brighness ">_x000D_
<p>less brightness</p>_x000D_
</div>
_x000D_
I found this today. It really helped me. http://www.propra.nl/playground/css_filters/
All you need is to add this to your css style.:
div {-webkit-filter: brightness(57%)}
You can use css filters, below and example for web-kit. please look at this example: http://jsfiddle.net/m9sjdbx6/4/
img { -webkit-filter: brightness(0.2);}
Like
.classname
{
opacity: 0.5;
}
With CSS3 we can easily adjust an image. But remember this does not change the image. It only displays the adjusted image.
See the following code for more details.
To make an image gray:
img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
}
To give a sepia look:
img {
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
}
To adjust brightness:
img {
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
}
To adjust contrast:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
To Blur an image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
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>
try this if you need to convert black image into white:
.classname{
filter: brightness(0) invert(1);
}
Source: Stackoverflow.com