Question

我使用base64编码的SVG存在问题。我使用了以下SVG：

我通过了这个文件： 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中。{/ p>

当样式表从上到下阅读时，它被覆盖了。

jsFiddle example

.ui-icon-menu

或者，您可以使用.ui-icon-menu { display: block; width: 48px; height: 48px; background: url(""); } .ui-icon-btn { display: block; background-color: red; }添加图像，而不仅仅是background-image，因此它不会被覆盖。 jsFiddle example

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属性。

为什么SVG背景颜色不变？

3 个答案: