Question

你好我想知道如何使用不同颜色的盒子改变图像的颜色我有一个心脏的图像，我想改变颜色从白色到红色，蓝色，黄色等。我希望能够在命令上更改它，谢谢

 <!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Untitled Document</title>
 <style>
 .foo {
 float: left;
 width: 20px;
 height: 20px;
 margin: 5px;
 border: 1px solid rgba(0, 0, 0, .2);
  }

.blue {
 background: #0012E3;
 }

.purple {
background: #ab3fdd;
}

.yellow {
 background: #FFF728;
}
</style>
<style>
$('#background').on('change', changeColor);

function changeColor() {
var color = $('#background').val();
$('p').css('color', color);
}
.non {
margin: 15px;
padding: 15px;
clear: none;
float: none;
height: 15px;
width: 15px;
   }
  </style>
  </head>

 <body>

 <div class="foo blue"></div>
 <div class="foo purple"></div>
 <div class="foo yellow"></div>

 <p><img src="Pictures\heart.gif" width="550" height="712" border="0"></p>
 </body>
 </html>

Answer 1

如果您的图片背景是透明的，您只需更改背景颜色：

$(document).ready(function(){
    $('img').css('background-color', 'red');
});

Answer 2

如果我理解正确，那么您尝试这样做是不可能的。在这种情况下，CSS用于设置HTML的样式，不能用于操作图像（实际上，它可以，但不是在这个程度上：参见过滤器）。

首选解决方案

彻底放弃心灵形象。使用 CSS 创建你的心。这使您可以非常轻松地操作它的所有属性。在摘要

下进行演示。

$('.button').click(function(){
  var color = $(this).attr('data-color');
  
  $("#heart").removeClass('yellow').removeClass('blue').removeClass('red').addClass(color);
  
  console.log(color);
})

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

.button{
  width: 50px;
  height: 50px;
  display: block;
  float: left;
  margin-right: 5px;
}

#heart.blue:after, #heart.blue:before{
  background: blue;
}

#heart.red:after, #heart.red:before{
  background: red;
}

#heart.yellow:after, #heart.yellow:before{
  background: yellow;
}

.button.blue{
  background: blue;
}

.button.red{
  background: red;
}

.button.yellow{
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="heart"></div>

<div class="button blue" data-color="blue"></div>
<div class="button red" data-color="red"></div>	
<div class="button yellow" data-color="yellow"></div>

替代解决方案

或者，您可以使用画布操作图像数据。我不有资格告诉你如何做到这一点，但这里有一个很好的Q＆amp; A帖子可以提供帮助 - Convert Image Color without changing its transparent background

使用jquery更改白框的颜色

2 个答案:

首选解决方案

替代解决方案