Issue
I am planning to use flag image for the status. Please see the image
In this image i want to fill the background color of the flag using CSS. The background color code is coming from server then i want to update the flag's color according to the color i got from server
I tried with SVG but it is not working in IE8. Please help me how to do this. thanks in advance for any help
Note: I need to support From IE7 to latest browsers. Don't want to use separate images for different colors.
Solution
If your flag will always be on the same background-color, you can simply use a .png, cut a hole where your color should appear and use background-color and background-image to create the desired result.
Html
<div class="flag"></div>
CSS
.flag {
width: 45px;
height: 54px;
background-color: #f00;
background-image: url(http://i.imgur.com/dD84kjR.png);
}
Example on JsFiddle: http://jsfiddle.net/a4EZ9/
Answered By - Simon Arnold
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.