图像变暗/不透明度

image darken/opacity

本文关键字：不透明度 图像      更新时间：2023-09-26

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

我不需要在鼠标悬停或其他任何东西上使用它，只需要让图像显示为禁用状态（我甚至可以使用样式标记来更改它的不透明度吗？）。

我该怎么办？

最简单的方法是在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 */

快速解决方案

使用CSS设置不透明度。使用jQuery，它很简单：

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

或者如果没有它，使用直接的CSS:将是最简单的

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

并添加/删除该类。

其他解决方案

另一种解决方案是将图像写入画布，然后逐个像素地进行处理，使其变暗。这比较慢，而且在旧的浏览器中不太支持，所以我不建议这样做。但这是可能的。如果你有兴趣了解更多，我会看看MDN。

您可以将不透明度用作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);
}

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

步骤1:将jquery包含在页面的头部。

步骤2:将class="disabled"添加到禁用的图像中。

步骤3:然后在页面的头部的脚本标记中写下以下行

$（function（）｛

$（'.disabled'）.fadeTo（0.5）；

})

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

img {
    opacity : 50%;
}
相关文章：