I have been looking to changing image colours with javascript but the problem is that I need to change the background colour of an image - ie add a tint to it
so i have read a lot of posts on here and it seems possible when the html has a img in it (ie an src) but i cant find any solutions for a background image
So my css may have this in it
.productBenefits ul li {
background: url("tick.png") no-repeat scroll 0 4px transparent;
}
depending on the url for example i have different colours, and I need to colour this background image with the provided hex - so for example #ff0000
can anyone help?
Are you looking for something like this: 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);
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.