1

ボタンとしてスタイル設定している DIV イメージがあります。このために、2 つの背景画像 (SVG 形式) と境界線 (デバッグ目的で、境界線は特大サイズ) を使用しています。背景画像を境界線の下に表示したい。モックアップ CSS:

.element {
background: url(bg1.svg) no-repeat,
    url(bg2.svg) no-repeat;
background-clip:border-box, border-box;
-webkit-background-clip:border-box;
-moz-background-clip:border-box;
background-size: cover, cover;
border: 10px inset rgba(255, 255, 255, .20);
}

この要素はフレックス ボックスであるため、動的にサイズ変更されることにも注意してください。

結果: Chrome、IE、Firefox、および Safari はすべて、境界線の一部の下に背景を表示しますが、全体は表示しません。

Chrome と IE では、境界線の下部パネルの下にのみ背景が表示されます。

Chrome では、背景と側面の境界線の間にも 1 ～ 2 ピクセルあります。

この問題が発生する理由や修正方法についてのアイデアはありますか?

編集:画像が PNG 形式の場合、通常、Chrome の背景と境界線の間の小さなギャップは問題になりません。問題は、背景が十分にスケーリングされていないことです。それを修正する方法はありますか？

4

1 に答える 1

1

修正が見つかりました: background-size: カバーはコンテンツ サイズ (境界線なし) に基づいているようです。100% より大きい値を使用すると、要素が十分に大きい場合の問題が修正されます。

preserveAspectRatio="none"SVG スクリプトにも追加する必要がありました。

于 2013-06-01T06:15:55.887 に答える