How do you darken an image without using filter?

Question

I'm looking for a way to darken an image without using the filter property, since the filter property isn't compatible with all IEs at all even with vendor prefixes. I need to make a website which is also compatible with at least IE 11. Is there any brilliant method to darken an image without using the filter property in CSS?

Does this answer your question? [How to make in CSS an overlay over an image?](https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an-image) — Awais, Jan 30 '20 at 09:16

score 0 · Answer 1 · answered Jan 30 '20 at 06:19

0

Try overlapping the image with a div and give it some opacity with color black.

answered Jan 30 '20 at 06:19

Harshit T

786
4
11

score 0 · Answer 2 · answered Jan 30 '20 at 08:42

Adding an overlay div would help. `

<div class="container">
  <div class="overlay"></div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5LKVYZUWJ1Uj-VymZDykSDIjBfmQfov7NPdAPdmvjWhtHPxHFSw&s" />
</div>

<style>
.container {
  height: 300px;
  width: 300px;
  position: relative;
}

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7)
}
</style>

` https://jsfiddle.net/devatquarxps/fq94ov7h/7/

How do you darken an image without using filter?

2 Answers2