爲什麼SVG背景顏色不變？

我使用base64編碼的SVG存在問題。我用下面的SVG： SVG Optimiser & Base64 Encoder 爲什麼SVG背景顏色不變？

最後，我有兩個班

.ui-icon-btn { 
    display: block; 
    background-color: red; //just a randomly picked color 
} 
.ui-icon-menu { 
    display: block; 
    width: 48px; 
    height: 48px; 
    background: url('data:image/svg+xml; base64, [...]'); 

}

當我打開創建的一個元素：

Menu Icon from iconmonstr

我穿過這個文件Chrome的DevTools告訴我，顏色已被覆蓋。我怎樣才能避免這種情況？

Example on JSFiddle

來源

2013-11-09 Jon Lamer

可能是一個關於特異性的問題..你能提供一個SVG的例子嗎？ –

我將它添加到我的文章中。 –

只需將.ui-icon-btn在CSS .ui-icon-menu後。

由於樣式表是從上到下讀取的，因此它被覆蓋。

jsFiddle example

.ui-icon-menu { 
    display: block; 
    width: 48px; 
    height: 48px; 
    background: url(""); 
} 
.ui-icon-btn { 
    display: block; 
    background-color: red; 
}

或者，你可以使用background-image添加圖像，而不是僅僅background這樣，以後就不會被覆蓋。 jsFiddle example

來源

2013-11-09 22:44:51

我會盡量保持這種記憶，謝謝！我感謝您的幫助。 :) –

你有一個image/svg+xml;和base64之間的空間。根據規範，這是不允許的。看到這個更正的小提琴：http://jsfiddle.net/53Zsr/2/

除此之外，如果你想保持顏色不變，只設置background-image屬性。

來源

2013-11-09 22:46:08 Boldewyn

的background:線是設置background-image，background-color，background-position等，如果您將其更改爲background-image:相反，它不會覆蓋background-color風格的簡寫。

來源

2013-11-09 22:47:32 Douglas

這對我也很有幫助，謝謝，:) –

爲什麼SVG背景顏色不變？

回答

相關問題