JQuery更改<；的色调、饱和度和gamma；img>；？

如果你把鼠标悬停在图像上，我想把它调暗一些。

---

是否可以使用JQuery（或Javascript）更改img的色调、饱和度或gamma？

仅使用Javascript不可能做到这一点（因为它无法操作二进制文件），但是您可以使用HTML5

元素来帮助

，有一些图书馆可以提供帮助

如果只想淡入淡出，请更改悬停时的不透明度，例如：

$("img").css({ opacity: 0.5 }).hover(function() {
  $(this).animate({ opacity: 1 });
}, function() {
  $(this).animate({ opacity: 0.5 });
});

---

在图像顶部显示和隐藏半透明黑色。

您尝试过或库了吗？

扩展Marcelo的建议，您可以在最后一个较暗阶段复制图像，将其置于原始图像的顶部，并像Nick所说的那样在鼠标悬停时改变其不透明度。此方法允许您对图像过渡执行任何操作：更改其色调、饱和度等。 可以找到一个简单的Javascript淡入淡出动画代码。

您可以在CSS中执行此操作

IMG:hover
{
    -ilter: brightness(0.7);
    -webkit-filter: brightness(0.7);
    -moz-filter: brightness(0.7);
    -o-filter: brightness(0.7);
    -ms-filter: brightness(0.7);
}

还有很多其他的滤镜，比如模糊、饱和、对比度等等

---

如果需要，您可以轻松地使用JQuery更改css。

我制作了这个原型，它使用了一个跨浏览器、css唯一的解决方案来设置悬停时图像饱和度的动画。在JS/jQuery中有很多方法可以做到这一点，但是为什么不在CSS中做到呢

img[class*="filter-resat"] {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); // For Firefox 10+
    filter: gray; // For IE 6+
    -webkit-filter: grayscale(100%); // for Chrome & Safari

    // Now we set the opacity
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; // for IE
    filter: alpha(opacity=40); // Chrome + Safari
    -moz-opacity: 0.6; // Firefox
    -khtml-opacity: 0.6; // Safari pre-webkit
    opacity: 0.6; // Modern

    // Now we set up the transition
    -webkit-transition: all 1.0s ease;
    -webkit-backface-visibility: hidden;
}

img[class*="filter-resat"]:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

// You can leave this part out and the above code will default to a 1 second transition duration.
img.filter-resat9 {-webkit-transition: all .9s ease;}
img.filter-resat8 {-webkit-transition: all .8s ease;}
img.filter-resat7 {-webkit-transition: all .7s ease;}
img.filter-resat6 {-webkit-transition: all .6s ease;}
img.filter-resat5 {-webkit-transition: all .5s ease;}
img.filter-resat4 {-webkit-transition: all .4s ease;}
img.filter-resat3 {-webkit-transition: all .3s ease;}
img.filter-resat2 {-webkit-transition: all .2s ease;}
img.filter-resat1 {-webkit-transition: all .1s ease;} 

img[class*=“过滤器重新设置”]{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；//用于Firefox10+
过滤器：灰色；//用于IE 6+
-webkit过滤器：灰度（100%）；//用于Chrome和Safari
//现在我们设置不透明度
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=60）”；//用于IE
过滤器：alpha（不透明度=40）；//Chrome+Safari
-moz不透明度：0.6；//Firefox
-khtml不透明度：0.6；//Safari pre webkit
不透明度：0.6；//现代
//现在我们设置了转换
-webkit过渡：所有1.0版本都很轻松；
-webkit背面可见性：隐藏；
}
img[class*=“过滤器重新设置”]：悬停{
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；
-webkit过滤器：灰度（0%）；
-ms过滤器：“progid:DXImageTransform.Microsoft.Alpha（不透明度=100）”；
过滤器：α（不透明度=100）；
-moz不透明度：1；
-khtml不透明度：1；
不透明度：1；
}
//您可以省略此部分，上面的代码将默认为1秒的转换持续时间。
img.filter-resat9{-webkit转换：all.9s ease；}
img.filter-resat8{-webkit转换：all.8s ease；}
img.filter-resat7{-webkit转换：all.7s ease；}
img.filter-resat6{-webkit转换：all.6s ease；}
img.filter-resat5{-webkit转换：all.5s ease；}
img.filter-resat4{-webkit转换：all.4s ease；}
img.filter-resat3{-webkit转换：all.3s ease；}
img.filter-resat2{-webkit转换：all.2s ease；}
img.filter-resat1{-webkit转换：all.1s ease；}

看看这里和这里

---

这项服务的支持率仍然很低。当前的IE和Firefox仍然不支持它。Chrome、Safari和大多数移动浏览器都有。这不是跨浏览器兼容的浏览器！我认为这不是一个可行的答案，因为它不是JQuery。如果你能用CSS获得同样的效果，为什么要用脚本呢？不管怎样，我现在正在用它，我发现了这个。如果可以，我会再次投票。：）