Comment réduire la luminosité de L'Image dans CSS
10 réponses
la caractéristique 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 du W3C: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
notez que c'est quelque chose qui n'est que très récemment entré dans CSS en tant que fonctionnalité. Il est disponible, mais un grand nombre de navigateurs là-bas ne le supportera pas encore, et ceux qui le supporteront auront besoin d'un préfixe vendeur (i.e. -webkit-filter: , -moz-filter , etc).
il est également possible de faire des effets de filtre comme celui-ci en utilisant SVG. La prise en charge de ces effets par SVG est bien établie et largement soutenu (les spécifications du filtre CSS ont été tirées des spécifications SVG existantes)
aussi noter que cela ne doit pas être confondu avec le style propriétaire filter disponible dans les anciennes versions D'IE (bien que je puisse prédire un problème avec le conflit d'espace de noms quand le nouveau style laisse tomber son préfixe vendeur).
si rien de tout cela ne fonctionne pour vous, vous pouvez toujours utiliser la fonctionnalité opacity existante, mais pas la façon dont vous pensez: il suffit de créer un nouvel élément avec une couleur foncée solide, placez-le sur votre image, et fondu en utilisant opacity . L'effet sera l'image derrière être obscurcie.
enfin, vous pouvez consulter le support du navigateur de filter ici .
Espère que ça aide.
OP veut en baisse luminosité", pas l'augmenter. L'opacité rend l'image plus lumineuse, pas plus sombre.
vous pouvez le faire en superposant une div noire sur l'image et en définissant l'opacité de cette 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>
en bref, placez le noir derrière l'image, et baissez l'opacité. Vous pouvez le faire en enveloppant 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.
vous pouvez utiliser:
filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
avec CSS3 nous pouvons facilement ajuster une image. Mais rappelez-vous que cela ne change pas l'image. Il affiche seulement l'image ajustée.
Voir le code suivant pour plus de détails.
pour faire 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 ajuster le contraste:
img {
-webkit-filter: contrast(200%);
-moz-filter: contrast(200%);
}
pour brouiller image:
img {
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
}
j'ai trouvé ça aujourd'hui. Il 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%)}
vous pouvez utiliser des filtres css, ci-dessous et par exemple pour web-kit. veuillez regarder cet exemple: http://jsfiddle.net/m9sjdbx6/4 /
img { -webkit-filter: brightness(0.2);}
-webkit-filter: brightness(0.50);
j'ai cette solution cool: https://jsfiddle.net/yLcd5z0h/
essayez ceci si vous avez besoin de convertir l'image noire en blanc:
.classname{
filter: brightness(0) invert(1);
}