Question

我有两个不同的按钮。一个用于黑色和白色，另一个用于棕褐色。我需要在点击按钮时更改图像的颜色。是否有任何jquery脚本可以改变黑白和棕褐色的图像颜色。

Answer 1

感谢您的回复。我用css找到了一个很好的解决方案。点击黑白按钮，我们可以称之为css。

.blackwhite-image
{
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"); /*  Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%);
}

和棕褐色

    .sepia-image
    {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'old-timey\'><feColorMatrix type=\'matrix\' values=\'0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0\'/></filter></svg>#old-timey"); 
-webkit-filter: sepia(1);
    -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
    -ms-filter: sepia(100%);
    -o-filter: sepia(100%);
    filter: sepia(100%);
    }

这对我很有用..

Answer 2

您需要上传图片文件的两个版本 - 黑色＆amp;白色版和棕褐色版。将单击事件附加到两个按钮，将相应的图像添加到页面。尝试这样的事情：

<强> HTML

<div id="output"></div>
<button id="bw">Black and white</button>
<button id="sep">Sepia</button>

<强>的Javascript

$('#bw').click(function() {
  $('#output').html('<img src="blackandwhite.png" />');
});

$('#sep').click(function() {
  $('#output').html('<img src="sepia.png" />');
});

使用jquery更改按钮单击时黑白图像颜色和棕褐色

2 个答案: