Comment réduire la luminosité de l'image dans CSS

107

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

css

— Shadi
source

vous pouvez utiliser l'opacité d'attribut

— Satinder singh

Je l'ai utilisé mais ça augmente la luminosité ...

— Shadi

la réponse acceptée fonctionne bien, mais il y a aussi un nouvel filtereffet standard CSS dont vous voudrez être conscient à l'avenir. Voyez ma réponse.

— Spudley

1

@shady, pouvez-vous revoir cette question pour marquer l'une des réponses proposant des solutions impliquant des filtres comme étant correcte. La réponse que vous avez marquée correcte serait la façon de le faire en 2006.

— Wes Modes

177

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/en/tutorials/filters/understanding-css/

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

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

Notez que c'est quelque chose qui n'est entré que très récemment dans CSS en tant que fonctionnalité. Il est disponible, mais un grand nombre de navigateurs ne le supportent pas encore, et ceux qui le prennent en charge nécessiteront un préfixe de fournisseur (c'est -webkit-filter:-à- dire -moz-filter, etc.).

Il est également possible de faire des effets de filtre comme celui-ci en utilisant SVG. Le support SVG pour ces effets est bien établi et largement supporté (les spécifications de filtre CSS ont été tirées des spécifications SVG existantes)

Notez également que cela ne doit pas être confondu avec le filterstyle propriétaire disponible dans les anciennes versions d'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 opacityfonctionnalité existante , mais pas la façon dont vous pensez: créez simplement un nouvel élément avec une couleur sombre unie, placez-le au-dessus de votre image et faites-le disparaître en utilisant opacity. L'effet sera de l'image derrière l'assombrissement.

Enfin, vous pouvez vérifier le support du navigateur filter ici .

— Spudley
source

32

OP veut diminuer la luminosité, pas l'augmenter. L'opacité rend l'image plus claire, 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

— sachleen
source

24

L'opacité ne rend rien de plus clair ou plus sombre. Cela change la transparence de l'objet. Que cela ait ou non pour effet de rendre quelque chose de plus clair ou plus sombre dépendra de la couleur d'arrière-plan derrière l'élément dont vous modifiez l'opacité. Contrairement à ce que vous dites, vous pouvez rendre quelque chose plus sombre en augmentant l'opacité si vous le mettez sur un fond noir. Une image transparente à 99% sur fond noir apparaîtra presque noire. Je ne vois donc pas pourquoi un div de superposition distinct est nécessaire. Vous pouvez simplement le définir sur un BG noir. Par exemple: jsbin.com/isemec/1/edit

— NickG

@NickG J'ai dit ça en supposant un fond blanc. Ce que vous avez fait est la même chose que mon code, seulement j'ai mis une superposition noire semi-transparente sur le dessus de l'image et vous avez un fond noir opaque avec une image semi-transparente sur le dessus.

— sachleen

17

En bref, placez du noir derrière l'image et réduisez l'opacité. Vous pouvez le faire en enveloppant l'image dans un 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>

Voici un JSFiddle.

— JL235
source

15

Vous pouvez utiliser:

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

— Nahomy Atias
source

9

Cette politique de «jetons des préfixes au cas où» est erronée. Premièrement, si Opera le supporte un jour, il ne l'aura pas -o-(Opera utilise maintenant Webkit / Blink), deuxièmement, Firefox est passé directement dans non préfixé filter, troisièmement, vous avez la mauvaise commande, non préfixé devrait être le dernier, quatrième, la syntaxe des IE -ms-filterest différente ( progid:DXImageTransform, etc.), cinquième, la syntaxe de Firefox est différente et nécessite SVG ( voir la documentation ), sixième, les nouvelles fonctionnalités ne sont pas susceptibles d'être préfixées parce que les fournisseurs ont réalisé à quel point c'était une mauvaise idée

— Camilo Martin

5

@CamiloMartin, alors vous auriez dû fournir une réponse plus complète à cette question car elle n'a pas encore été complètement répondue.

— Wes Modes

-webkit-filter: luminosité () / -webkit-filter: contraste () fonctionne. C'est une réponse appropriée à la question.

— Shilpa

vous pouvez l'utiliser dans sass mixin comme ceci: gist.github.com/johnferrie/3836468

— Erez Lieberman

6

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

Consultez 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 aspect 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);
  }

— Raj Sharma
source

1

Veuillez ne pas publier exactement la même réponse à plusieurs questions: soit cela ne convient pas à tous, soit les questions sont des doublons qui doivent être signalés / fermés comme tels.

— kleopatra

3

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%)}

— Esprit en mouvement
source

2

Si vous avez une image d'arrière-plan, vous pouvez faire ceci: 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>

Développer l'extrait

— Sébastien Gicquel
source

excellent. J'avais besoin d'une solution pour assombrir une image d'arrière-plan et toutes les autres réponses assombrissent l'ensemble du div.

— nuander

1

Vous pouvez utiliser des 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);}

— GibboK
source

0

-webkit-filter: brightness(0.50);

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

— Prashant Ghimire
source

0

essayez ceci si vous devez convertir une image noire en blanc:

.classname{
    filter: brightness(0) invert(1);
}

— Rizo
source

-3

Comme

.classname
{
 opacity: 0.5;
}

— Satinder singh
source

merci mais cela augmente la luminosité ne la diminue pas !!

— Shadi

Cela dépend de la couleur de fond.

— apocalypse

à droite @zgnilec cela dépend de la couleur de fond ... si vous le mettez en noir, la luminosité de l'image sera diminuée

— Shadi

cela ne fonctionne pas pour augmenter la luminosité de plus de 100%, l'opacité ne peut atteindre que 1

— Javis Perez

N'étant pas anglophone, je voulais en fait rechercher "opacity" et j'ai quand même proposé cette réponse. Même si cette réponse ne répond pas à la question, il est bon de savoir que cela opacityaugmente la luminosité. ;)