图像变暗/不透明度答案

【问题标题】：image darken/opacity图像变暗/不透明度
【发布时间】：2012-02-05 02:19:36
【问题描述】：

快速，是否可以使用 javascript 或其他工具使图像变暗？

我在鼠标悬停或其他任何事情上都不需要它，只是为了使图像显示为禁用（我可以使用样式标签来更改它的不透明度吗？）。

我该怎么办？

【问题讨论】：

你的意思是something like this？（注意，在最新的 Firefox 中有效，不透明的想法可以是浏览器和版本特定的。）（dark 示例：jsfiddle.net/Sctkz/1）

【解决方案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 指出的那样，如果您使用的是具有 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 */

【讨论】：

可能想添加filter: alpha(opacity=40);和60，这样它就有IE支持了。
@Ktash - Quirksmode 说要使用更冗长的东西。
如果使用了具有 alpha 透明度的图像，则可以直接在图像上使用 background-color（尽管这会同样受到元素本身的 opacity 的影响，这可能或者可能不是问题）。 Rudimentary demo.
@DavidThomas - 我实际上已经尝试过，但它似乎没有用。你有小提琴要演示吗？
@JaredFarrish 是的，它有更详细的版本，但仅使用filter: alpha(opacity=XX) 就足以与 IE8 及以下版本兼容。 developer.mozilla.org/en/CSS/opacity

【解决方案2】：

快速解决方案

使用 CSS 设置不透明度。使用 jQuery，就这么简单：

$('img').css('opacity',0.5);

或者没有它，使用直接的 CSS 是最简单的：

img.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50); /* IE support */
}

并添加/删除该类。

其他解决方案

另一种解决方案是将图像写入画布，逐个像素地检查并使其变暗。这速度较慢，并且在旧浏览器中没有得到很好的支持，所以我不推荐这样做。但这是可以做到的。如果您有兴趣了解更多信息，我会查看MDN。

【讨论】：

【解决方案3】：

您可以将 opacity 用作 W3C 兼容浏览器（即任何 bot Internet Explorer）的属性，并将其用作其余浏览器的过滤器。

opacity: 0.4; /* For non-IE browsers */
filter: alpha(opacity=40); /* For IE */

您还可以添加一个容器元素，例如一个 DIV，其背景颜色为不透明：

<div class='image disabled'><img ... /></div>

然后有这个 CSS：

div.image {
    display: inline-block;
}

div.image.disabled {
    background-color: #cccccc;
}

div.image.disabled img {        
    opacity: 0.4;
    filter: alpha(opacity=40);
}

【讨论】：

【解决方案4】：

或者，您可以使用 jquery 来实现与浏览器兼容的不透明度：

第一步：在页面头部包含 jquery。

第 2 步： 将 class="disabled" 添加到禁用的图像。

第三步：然后在页面头部的脚本标签中写下以下几行

$(函数(){

$('.disabled').fadeTo(0.5);

})

【讨论】：

【解决方案5】：

您可以通过 CSS 设置不透明度，例如：

img {
    opacity : 50%;
}

【讨论】：