1

base64 でエンコードされた SVG を使用すると問題が発生します。次の SVG を使用しました。

iconmonstrのメニューアイコン

このファイルを渡しました: SVG Optimiser & Base64 Encoder

最後に、2 つのクラスを持つ 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 の例

4

3 に答える 3

3

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 の例

于 2013-11-09T22:44:51.910 に答える
3

行は、 設定、などのbackground:省略形です。代わりに変更すると、スタイルは上書きされません。background-imagebackground-colorbackground-positionbackground-image:background-color

于 2013-11-09T22:47:32.683 に答える
0

との間にスペースがimage/svg+xml;ありbase64ます。仕様上、許可されていません。この修正されたフィドルを参照してください: http://jsfiddle.net/53Zsr/2/

それとは別にbackground-image、色をそのまま維持したい場合は、プロパティのみを設定します。

于 2013-11-09T22:46:08.970 に答える