Question

如何更改具有透明背景的图像的颜色？我创建了一个图书馆，图像可供选择，所有图像都是黑色的透明背景。我希望能够将黑色更改为用户选择的任何颜色。我需要一个允许在点击时改变颜色的JavaScript代码。

我正在使用.foo来改变颜色，下面的内容是我用于图像的代码，但我似乎无法找到允许我使用颜色框更改图像颜色的代码为没有放入实际图像道歉我想尽可能保持简单，如果我发布了图像，那将是一个漫长而令人困惑的代码。我希望能够使用class（modal-contant）

$('img').on('click', function() {
    $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
    $('.imgdrag').draggable();
    $('#fotos').droppable();
    $('.modal-content').resizable();        
});

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.black {
  background: black;
}.red {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

**HTML for the image to display**

<div id="fotos" class="bananas"><img class="modal-content" id="imgdisplay" /></div>


**HTML for the foo color boxes to change the color of the image**

<div id="colour">
    <div value="black" class="foo black" data-color="black">
    </div><div class="foo red" data-color="red"></div>
</div>

单击时更改图像的颜色

0 个答案: