Javascript 使用jquery更改白色框的颜色_Javascript_Jquery_Html_Css_Image

Javascript 使用jquery更改白色框的颜色

javascript jquery html css image

Javascript 使用jquery更改白色框的颜色,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,您好，我想知道如何使用不同的颜色框更改图像的颜色我有一个心脏图像，我想将颜色从白色更改为红色、蓝色、黄色等。我希望能在命令下更改它谢谢 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <style> .foo { float: left; width: 20px; hei

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

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

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

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

如果我理解正确，这是不可能的方式，你正试图这样做。在这种情况下，CSS用于设置HTML的样式，不能用来很好地处理图像，实际上，它可以，但不能达到这种程度：参见过滤器

首选解决方案完全抛弃内心的形象。使用CSS创建您的心脏。这使您可以非常、非常轻松地操纵它的所有属性。在下面的代码片段中演示

$'.button'。单击函数{ var color=$this.attr'data-color'； $heart.removeClass'yellow'.removeClass'blue'.removeClass'red'.addClasscolor； console.logcolor； } 心{ 位置：相对位置；宽度：100px；高度：90px； } 心脏：以前，心脏：之后{ 位置：绝对位置；内容：；左：50px；排名：0；宽度：50px；高度：80px；背景：红色； -moz边界半径：50px 50px 0；边界半径：50px 50px 0； -webkit变换：旋转-45度； -moz变换：旋转-45度； -ms变换：旋转-45度； -o变换：旋转-45度；变换：旋转-45度； -webkit转换来源：0 100%； -moz变换原点：0 100%； -ms变换原点：0.100%； -o-变换原点：0.100%；变换原点：0.100%； } 心脏：之后{ 左：0； -webkit变换：旋转45度； -moz变换：旋转45度； -ms变换：旋转45度； -o变换：旋转45度；变换：旋转45度； -webkit转换来源：100%100%； -moz变换原点：100%100%； -ms变换原点：100%100%； -o-变换原点：100%100%；变换原点：100%100%； } .按钮{ 宽度：50px；高度：50px；显示：块；浮动：左；右边距：5px； } 蓝：之后，心。蓝：之前{ 背景：蓝色； } 红色：在之后，心。红色：在之前{ 背景：红色； } 黄：之后，心。黄：之前{ 背景：黄色； } .按钮.蓝色{ 背景：蓝色； } .按钮，红色{ 背景：红色； } .按钮.黄色{ 背景：黄色； }

除了将jQuery放在样式块中之外，还有什么问题？你会犯什么错误？问题是当我点击图片时，我无法改变颜色。什么都没有发生。所以，你试图改变红黄蓝等颜色的心脏？不是html框？如果是这样的话，那么你需要试试这样的东西。改变图像的颜色是不可能的。相反，如果您使用不同颜色的不同图像，您可以在单击时使用jquery并显示相关图像。我想使用html框更改图像的颜色这会更改框的颜色。不过，我认为他们想改变图像中心脏的颜色。谢谢，我的答案是经过编辑的。