Comment réduire la luminosité d'une image en CSS

Question

Je veux diminuer la luminosité d'une image en CSS. J'ai beaucoup cherché mais tout ce que j'ai trouvé, c'est comment changer l'opacité, mais cela rend l'image plus lumineuse. Quelqu'un peut-il m'aider ?

Answer 1

J'ai trouvé ça aujourd'hui. Ça m'a vraiment aidé. http://www.propra.nl/playground/css_filters/

Tout ce dont vous avez besoin est d'ajouter ceci à votre style css. :

div {-webkit-filter: brightness(57%)}

Answer 2

Si vous avez une image de fond, vous pouvez le faire : Définissez un dégradé rgba() sur l'image d'arrière-plan.

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  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 */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}

<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>

Answer 3

Il est évident que tout ce que vous avez à faire est ceci .

<img src="https://rb.gy/njdqof" class="IMG">

CSS suit

/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/

.IMG {
  filter: brightness(20%);
}

Answer 4

Vous pouvez utiliser des filtres css, ci-dessous et un exemple pour web-kit. Veuillez regarder cet exemple : http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

Answer 5

-webkit-filter: brightness(0.50);

J'ai cette solution cool : https://jsfiddle.net/yLcd5z0h/