html - 为什么 SVG 背景颜色不改变？

Question

我有一个使用 base64 编码的 SVG 的问题。我使用了以下 SVG：

来自 iconmonstr 的菜单图标

我通过了这个文件： SVG Optimiser & Base64 Encoder

最后我创建了一个包含两个类的 a 元素

.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

只需放在CSS.ui-icon-btn之后.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;和之间有一个空格base64。根据规范，这是不允许的。看到这个更正的小提琴：http: //jsfiddle.net/53Zsr/2/

除此之外background-image，如果要保持颜色不变，请仅设置属性。