CSS背景颜色填充图标

Question

我打算将状态图像用于状态。请看图像

在此图像中，我想使用CSS填充标志的背景颜色。背景颜色代码来自服务器然后我想根据我从服务器获得的颜色更新标志的颜色

我尝试使用SVG，但它在IE8中无效。请帮我怎么做。提前感谢您的帮助

注意：我需要支持从IE7到最新的浏览器。不想为不同的颜色使用单独的图像。

Answer 1

您可以使用Font Awesome Icon库将标志绘制为字体，并使用css更改颜色。

http://fortawesome.github.io/Font-Awesome/icons/

<i class="icon-flag" style="color: green"></i>
<i class="icon-flag" style="color: orange"></i>
<i class="icon-flag" style="color: red"></i>

示例 http://jsfiddle.net/QvQtg/1/

Answer 2

如果您的旗帜始终采用相同的背景颜色，您只需使用.png，在您应该出现颜色的位置切出一个洞，然后使用背景色和背景图像来创建所需的结果。

<强> HTML

<div class="flag"></div>

<强> CSS

.flag {
    width: 45px;
    height: 54px;
    background-color: #f00;
    background-image: url(http://i.imgur.com/dD84kjR.png);
}

关于JsFiddle的示例：http://jsfiddle.net/a4EZ9/