图像变暗/不透明

Question

快速,是否可以使用javascript或其他东西使图像变暗？

我不需要鼠标悬停或任何东西,只是为了使图像显示为禁用(我可以使用样式标签更改它的不透明度吗？).

我该怎么办？

Answer 1

最简单的方法是使用不透明度,img并在必要时使用具有您要添加的颜色的背景元素(请注意,不透明度在某种程度上取决于浏览器和版本,此示例适用于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指出的那样,如果你正在使用具有alpha透明度的,你可以添加background-color到img自身:

http://jsfiddle.net/GfkeF/

根据Quirksmode,可以获得使用兼容性视图的完整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 */