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

Question

我在使用 base64 编码的 SVG 时遇到了问题。我使用了以下 SVG:

Menu Icon from 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 时，它告诉我颜色已被覆盖。我怎样才能避免这种情况？

Example on JSFiddle

Answer 1

只需将 .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