SVG背景顏色為什么不改變？

Question

使用base64編碼的SVG時出現問題。 我使用了以下SVG：

來自iconmonstr的菜單圖標

我通過以下文件傳遞了該文件： SVG Optimiser和Base64編碼器

最后，我創建了一個包含兩個類的元素

.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, [...]');

}

當我打開Chrome的DevTools時，它告訴我顏色已被覆蓋。 如何避免這種情況？

JSFiddle上的示例

Answer 1

只需將.ui-icon-btn放在CSS中的.ui-icon-menu之后。

從上到下讀取樣式表時，它已被覆蓋。

jsFiddle示例

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

或者，您可以使用background-image添加圖像，而不是僅添加background ，這樣就不會覆蓋它。 jsFiddle示例

Answer 2

background:線是設置background-image ， background-color ， background-position等的簡寫。如果將其更改為background-image: ：，則不會覆蓋background-color樣式。

Answer 3

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

除此之外，如果要保持顏色不變，請僅設置background-image屬性。