これは、 をサポートするブラウザーでうまく機能しますbackground-size
。それ以外の場合は、2 倍の画像がズームされます。
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
background-size: 100%;
height: 500px;
width: 500px;
}
これは、サポートされていないブラウザーに使用する必要がありますbackground-size
。
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
}
background-size
サポートされていないときにブラウザをだましてフォールバックさせることは可能ですか? 使用できることはわかっていますが、この場合はまったく無意味な@supports
ほどサポートされていません。background-size
JavaScriptも使いたくありません。
仕事以外は基本的にそうです!
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
/* stop parsing this rule when background-size is not supported */
/* otherwise continue parsing and set different background-image */
background-size: 100%;
background-image: url(img2x.jpg); /* 1000x1000 */
}
これは明らかに機能しませんが、機能させるためのトリックはありますか? ありがとう。