Question

我想改变图像的颜色。图像中有多种颜色，因此色调旋转css滤镜看起来很棒，令人惊叹，完全像我想要的那样（http://www.html5rocks.com/en/tutorials/filters/understanding-css/链接到色调旋转示例）。我希望能够通过单击按钮来更改单个图像的颜色 - 它会将角度增加1 *（或在360 *时设置为零），稍微改变图像颜色。

虽然我可以为每个学位制作样式表，但这是非常不切实际的。同一页面上有几百个图像需要具有该效果，这意味着......如果我不希望它们一起改变，那么很多单独的样式表。我无法使用谷歌找到任何答案。

TL; DR想要使用网络浏览器中的按钮旋转图像的色调。

Answer 1

这可以使用jquery轻松完成。

说出你的形象是：

    <img src="yourimage.jpeg" id="myimage"/>

你有一个按钮：

    <button id="mybutton">Hue Rotator</button>

现在在您的页面中，您需要在脚本中包含jquery.js。

一小部分脚本可以让你完成其余的工作。

    <script type="text/javascript>
    $(document).ready(function(){

            var degree = 0;

            var rotatehue = function(){
                    degree++;
                    if(degree>360)degree=0;
                    $('#myimage').css('-webkit-filter','hue-rotate('+degree+'deg)');
            }

            $('#mybutton').bind('click',function(){
                    window.setInterval(rotatehue,30);
            });

    });
    </script>

现在点击按钮，您的图像应该开始旋转色调。

如何使用按钮更改图像颜色，而不使用360不同的CSS表？

1 个答案: