2013-04-30 70 views
0

我一直在寻找变化的图像色彩与JavaScript,但问题是,我需要改变图像的背景颜色 - 即增加一个色彩给它随时改变背景图像的颜色与JS

所以我已经阅读了很多帖子在这里,它似乎有可能当HTML有一个IMG在它(即一个src),但我找不到任何解决方案的背景图像

所以我的CSS可能有这个在它

.productBenefits ul li { 
background: url("tick.png") no-repeat scroll 0 4px transparent; 
} 

取决于url例如我有不同的颜色,我需要用提供的十六进制颜色背景图像 - 例如#ff0000

任何人都可以帮忙吗?

+0

看我提供了关于[jQuery的情况下设置背景图片]答案(HTTP :http://stackoverflow.com/questions/15944127/jquery-case-set-background-image/15944673#15944673),小提琴可用[这里](http://jsfiddle.net/killrawr/g6tJW/17/) – Killrawr 2013-04-30 00:38:59

+0

[这个描述是你要去的效果?](http://users7.jabry.com/overlord/mug.html) – Ohgodwhy 2013-04-30 00:40:07

+0

@Killrawr我需要有一个图像,我的颜色不是大量的diff图像的case语句 - 但谢谢 – Dan 2013-04-30 00:42:17

回答

0

您正在寻找这样的事情:http://jsfiddle.net/AyyU6/1/

HTML:

Hover on the links, and see the result 
<br> 
<a href='#' data-color='#fff000'>Color 1</a> 
<a href='#' data-color='#fffaaa'>Color 2</a> 
<a href='#' data-color='#333000'>Color 3</a> 
<a href='#' data-color='#123000'>Color 4</a> 
<a href='#' data-color='#fff555'>Color 5</a> 

<div style="width: 100px; height:100px;"> 

</div> 

的Javascript:

$('a').mouseenter(function(){ 
    // Getting color information from the links data-color attr, of course it can be anything you define 
    var color = $(this).attr('data-color'); 

    $('div').css('background-color',color); 
})