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 ?
Réponses
Trop de publicités?
La fonction que vous recherchez est filter . Il est capable d'effectuer toute une série d'effets sur l'image, notamment 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 du W3C : https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Notez qu'il s'agit d'une fonctionnalité qui n'est apparue que très récemment dans les CSS. Elle est disponible, mais un grand nombre de navigateurs ne la prendront pas encore en charge, et ceux qui la prennent en charge exigeront un préfixe fournisseur (c'est-à-dire -webkit-filter: , -moz-filter etc).
Il est également possible de réaliser des effets de filtre comme celui-ci en utilisant le SVG. La prise en charge de ces effets par le SVG est bien établie et largement soutenue (les spécifications des filtres CSS ont été reprises des spécifications SVG existantes).
Notez également qu'il ne faut pas confondre ce produit avec le produit propriétaire filter disponible dans les anciennes versions d'IE (bien que je puisse prévoir un problème de conflit d'espace de noms lorsque le nouveau style abandonnera son préfixe fournisseur).
Si rien de tout cela ne fonctionne pour vous, vous pouvez toujours utiliser l'outil existant opacity mais pas de la manière à laquelle vous pensez : il suffit de créer un nouvel élément avec une couleur foncée unie, de le placer au-dessus de votre image et de l'effacer en utilisant la fonction opacity . L'effet sera que l'image derrière sera assombrie.
Enfin, vous pouvez vérifier le support du navigateur de filter aquí .
sachleen
Points
17288
Le PO veut diminuer la luminosité, pas l'augmenter. L'opacité rend l'image plus lumineuse, pas plus sombre.
Pour ce faire, vous pouvez superposer une division noire sur l'image et définir l'opacité de cette division.
<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>
JL235
Points
659
En bref, placez du noir derrière l'image, et diminuez 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>Ici est un JSFiddle.
Nahomy Atias
Points
80
Raj
Points
91
Avec CSS3, nous pouvons facilement ajuster une image. Mais n'oubliez pas que cela ne change pas l'image. Elle affiche seulement 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 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 flouter une image :
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}- Réponses précédentes
- Plus de réponses
