圖標的CSS背景顏色填充

我打算使用標誌圖像作爲狀態。請參閱圖像圖標的CSS背景顏色填充

enter image description here

在這張圖片我要填寫使用CSS標誌的背景顏色。背景顏色代碼來自服務器然後我想根據我從服務器獲得的顏色更新標誌的顏色

我試過用SVG，但它不能在IE8中工作。請幫助我如何做到這一點。在此先感謝您的任何幫助

注：我需要支持從IE7到最新的瀏覽器。不想爲不同顏色使用單獨的圖像。

爲什麼你不能使用圖像和交換一下嗎？我會認爲這會更容易。 – Keith

@請記住，如果需要支持的顏色數量很大，那會是一個問題。 – Pointy

我覺得你要麼在這裏使用圖像，要麼是長方形的標誌。否則，這將是醜陋的 - 並且可能永遠不會在老版本的IE中工作。 – Gray

如果您的旗幟將始終處於相同的背景色，您可以簡單地使用.png，在應該出現顏色的位置切一個洞，並使用背景色和背景圖創建所需的結果。

的Html

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

CSS上的jsfiddle

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

2013-07-31 14:28:13

它工作正常。非常感謝你的幫助。 –

您可以使用字體真棒圖標庫繪製標誌作爲字體和變化與CSS的顏色。

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

2013-07-31 14:35:48

很好想過！ –

@Soc謝謝你的幫助。這對我們來說是好的，新的。 –

@Soc我無法將您的答案標記爲答案，因爲只有一個可以被標記爲答案。你的也是另一種方式。 –

回答