为什么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背景颜色不变？

回答

相关问题