How to darken an image with css?

Question

css

How to slightly darken the image as in the example? Is it really possible to do this in CSS?

Answer 1

https://css-tricks.com/vignetting-woes/jordandobson.com/_expirements/css/vignette
_

Answer 2

The most supported way is to overlay a block with a black background and the necessary transparency, all other methods are not so cross-browser or useful, for example, using inset shadows still causes severe brakes in some browsers. If you care about your visitors, and the banner will not change every day, make such effects right away in Photoshop, one-time or by creating a template (mockup) with this background for the future.

Answer 3

img{ 
opacity:0.8;
-moz-opacity:0.8;
filter: alpha(opacity=80) black;
-khtml-opacity: 0.8;
background-color:#000;
}

Try like this. works good.

Answer 4

I do this:
I put a div (foto) with a photo background in a div (foto_box) with a black background and opacity fires when the cursor is hovered
Styles:
.foto_box{width:300px;height:200px;float:left;background-color:#000000; }
.foto{width:300px;height:200px;float:left;background-image:url(foto.jpg);background-repeat:no-repeat;}
.foto:hover {opacity:0.8;}

Answer 5

This is how it works, but you need to wrap it in a div. wanted to do without a diva.

.aki {
  position: relative;
}
.aki::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgb(0, 0, 0, 0.5);
  background: -webkit-gradient(linear, left bottom, left top, from(rgb(0, 0, 0, 0.5)), color-stop(30%, rgb(255, 255, 250, 0)));
  background: linear-gradient(0deg, rgb(0, 0, 0, 0.5) 0%, rgb(255, 255, 250, 0) 30%);
}