javascript - 使用 jquery 更改背景图像颜色？

Question

所以，我的页面上有下面的 css。我希望访问者能够通过在文本字段中输入 #colorcode 来更改该图像的颜色。这样的事情甚至可能吗？

.button{
    background-image:url(../pattern/_img/button.png);
    background-repeat:no-repeat;
    display:block;
    width:53px;
    height:53px;
    float:left;
    margin:16px;
    -ms-touch-action: none;
}

Answer 1

你能做的就是改变你的形象。像这样为您拍摄一个外部为白色而内部为空(但让您的渐变)的 PNG 图像:

然后在图像后面设置一个div。将更改的是该 div 的背景颜色。在你的 js 中设置:

element.style.backgroundColor = document.getElementById('color').value;

这不使用 Canvas ，但它使用的代码很少。

Here is the JSFiddle .

抱歉英语不好，希望对你有帮助!

啊，上图是here .