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所指出的那样，如果您正在处理具有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 */

Answer 2

快速解决方案

使用CSS设置不透明度。使用jQuery，它就像：

一样简单

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

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

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

添加/删除该类。

其他解决方案

另一个解决方案是将图像写入画布，逐字逐行地逐渐变暗。这个速度较慢，并且在旧版浏览器中得不到很好的支持，所以我不建议这样做。但它有可能做到。如果你有兴趣了解更多，我会看MDN。

Answer 3

您可以将不透明度用作W3C兼容浏览器的属性（即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);
}

Answer 4

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

img {
    opacity : 50%;
}

Answer 5

或者，您可以将jquery用于与浏览器兼容的不透明度：

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

Step2：将class =“disabled”添加到已禁用的图片中。

Step3：然后在页面开头的脚本标记中写下以下行

$（函数（）{

$（ '禁用。'）fadeTo（0.5）;

}）

图像变暗/不透明

5 个答案:

快速解决方案

其他解决方案