javascript - 图标的 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/