1

svg をサポートしていないデバイス用のフォールバック png を含む svg バックグラウンドがあります。背景色もつけてみました。IE8 を含むすべてのデスクトップ ブラウザーで動作します。しかし、iOS にはありません。(現在、チェックするAndroidはありません)

iOS で。svg、png、または png と background-color または svg と background color で動作します。しかし、それは3つ一緒に動作しません。

問題は、これらすべてをまとめる方法です:
- iOS (および Android)
- 背景色
- svg
- png フォールバック

ここで回答を確認してください: http://jsfiddle.net/TtWhH/
(例として、パブリック URL にある可能性のある img を使用します)

HTML:

<div id="grafic"></div>

CSS:

#grafic{
    position:relative;
    margin:0 auto;
    width:512px; height:512px;
    max-width:980px;
    background-color:yellow;

    background-image:url('http://www.w3.org/html/logo/downloads/HTML5_Badge.svg');
    background-image:none,url('http://www.w3.org/html/logo/downloads/HTML5_Badge.svg'), url('http://www.w3.org/html/logo/downloads/HTML5_Badge_512.png');
    background-repeat:no-repeat;
    background-position:left top;       
}
4

0 に答える 0