web-dev-qa-db-fra.com

Comment diminuer la luminosité de l'image en CSS

Je veux diminuer la luminosité de l'image en CSS. J'ai beaucoup cherché, mais tout ce qui me reste à faire est de changer l'opacité, mais cela rend l'image plus lumineuse .. Quelqu'un peut-il m'aider?

csscss3
90
Shadi

La fonctionnalité que vous recherchez est filter. Il est capable de faire une gamme d'effets d'image, y compris la luminosité:

#myimage {
    filter: brightness(50%);
}

Vous pouvez trouver un article utile à ce sujet ici: http://www.html5rocks.com/fr/tutorials/filters/understanding-css/

Un autre: http://davidwalsh.name/css-filters

Et surtout, les spécifications du W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

Notez que cette fonctionnalité n’est que très récemment entrée dans CSS. Il est disponible, mais un grand nombre de navigateurs ne le supporte pas encore, et ceux qui le supportent auront besoin d'un préfixe de vendeur (c'est-à-dire -webkit-filter:, -moz-filter, etc.).

Il est également possible de faire des filtres comme celui-ci en utilisant SVG. La prise en charge SVG de ces effets est bien établie et largement prise en charge (les spécifications de filtre CSS sont extraites des spécifications SVG existantes)

Notez également que cela ne doit pas être confondu avec le style propriétaire filter disponible dans les anciennes versions de IE (bien que je puisse prédire un problème avec le conflit d'espace de noms lorsque le nouveau style supprime son préfixe de fournisseur).

Si rien de tout cela ne fonctionne pour vous, vous pouvez toujours utiliser la fonctionnalité opacity existante, mais pas votre façon de penser: créez simplement un nouvel élément avec une couleur sombre unie, placez-le sur votre image et fondez-le en fondu. opacity. L'effet sera de l'image derrière être assombri.

Enfin, vous pouvez vérifier la prise en charge du navigateur par filterhere .

J'espère que cela pourra aider.

146
Spudley

OP veut diminuer la luminosité, pas l'augmenter. L'opacité rend l'image plus lumineuse, pas plus sombre.

Vous pouvez le faire en superposant un div noir sur l'image et en définissant l'opacité de ce 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>

DEMO

32
sachleen

En bref, placez le noir derrière l’image et baissez l’opacité. Vous pouvez le faire en encapsulant l'image dans une div, puis en réduisant l'opacité de l'image.

Par exemple:

<!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>

Ici est un JSFiddle.

17
JL235

Vous pouvez utiliser:

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
14
Nahomy Atias

Avec CSS3, nous pouvons facilement ajuster une image. Mais rappelez-vous que cela ne change pas l'image. Il affiche uniquement l'image ajustée.

Voir le code suivant pour plus de détails.

Pour rendre une image grise:

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

Pour donner un look sépia:

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

Pour régler la luminosité:

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

Pour régler le contraste:

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

Pour brouiller une image:

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
5
Raj Sharma

J'ai trouvé ça aujourd'hui. Cela 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%)}
3
Spirit In Motion

Vous pouvez utiliser les filtres CSS, ci-dessous et un exemple pour le kit Web. Veuillez regarder cet exemple: http://jsfiddle.net/m9sjdbx6/4/

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

Si vous avez une image d’arrière-plan, vous pouvez procéder comme suit: 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>
0
Sébastien Gicquel

essayez ceci si vous avez besoin de convertir une image noire en blanc:

.classname{
    filter: brightness(0) invert(1);
}
0
Rizo
-webkit-filter: brightness(0.50);

J'ai cette solution intéressante:https://jsfiddle.net/yLcd5z0h/

0
Prashant Ghimire