使用jquery更改白色框的颜色

change color of a white box using jquery

本文关键字：颜色 白色 jquery 使用      更新时间：2024-06-07

你好，我想知道如何使用不同的颜色框更改图像的颜色。我有一个心脏的图像，我想将颜色从白色更改为红色、蓝色、黄色等。我希望能够根据命令更改它谢谢

 <!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>

如果我理解正确的话，这在你尝试的方式中是不可能的。在这种情况下，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>

替代解决方案

或者，您也可以使用画布操作图像数据。我没有资格告诉你如何做到这一点，但有一个很好的问答；这里的一个线程将有所帮助-在不改变其透明背景的情况下转换图像颜色

如果您的图像背景是透明的，您可以更改背景颜色：

$(document).ready(function(){
    $('img').css('background-color', 'red');
});
相关文章：