javascript - 图像变暗/不透明

Question

快捷方式，是否可以使用javascript或其他方式使图像变暗？

我不需要鼠标悬停或其他任何操作，仅使图像显示为禁用(我是否可以使用样式标签更改其不透明度？)。

我该怎么办？

Answer 1

最简单的方法是在img上使用不透明性，并在必要时使用要添加颜色的背景元素(请注意，不透明性在某种程度上为browser and version dependent，此示例在Firefox，Chrome和我假设其他Webkit浏览器中均可使用):

img {
    float: left;
}
#light {
    opacity: .4;
    float: left;
}
#dark {
    background: black;
    float: left;
}
#dark img {
    opacity: .6;
    display: inline;
}

<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<img id="light" src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="dark">
 <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
</div>

http://jsfiddle.net/Sctkz/1/

就像David Thomas指出的那样，如果您使用的是具有透明度的透明胶片，则可以将 background-color添加到 img本身:

http://jsfiddle.net/GfkeF/

根据 Quirksmode的介绍，可以使用兼容性 View 获得对IE的完整支持:

opacity: .5; /* Firefox, Chrome[, Webkit?] */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

否则，如Ktash和 MDN所述，您可以简单地使用:

opacity: .5; /* Firefox, Chrome[, Webkit?] */
filter: alpha(opacity=50); /* In general, probably ok for IE */