html - IE の background-size フォールバック

Question

ここにこのメニューがあります。各親 li に background-image を設定します (サブメニューには 2 行にいくつかのエントリがあるため、background-size の高さに高い値を設定し、高さに高い値を設定するとそれが補正されます)。問題は、IE が background-size をサポートしていないため、次のようになります。

どうすればこれを解決できますか? 高さの高い背景画像を作成しようとしましたが、何も変わりません。

Answer 1

background-sizeIE はIE9 の時点でサポートしています。IE8 以下では、background-size polyfillを試すことができます。あなたのケースはまったく必要ないようbackground-sizeです。IE9+ には使用rgba()し、IE8- には繰り返し PNG-24 背景を使用します。

Answer 2

画像は単色なので、background-sizeand を削除するだけですbackground-repeat: none(つまり、繰り返しさせます)。

background-imageまたは、 を廃止して、透明度のある背景色を使用することもできます。

.test {
    background: rgb(255, 255, 255); // solid white fallback for old browsers
    background: rgba(255, 255, 255, 0.5); // 50% transparent white
}