7

これは、 をサポートするブラウザーでうまく機能します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-sizeJavaScriptも使いたくありません。

仕事以外は基本的にそうです!

.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 */
}

これは明らかに機能しませんが、機能させるためのトリックはありますか? ありがとう。

4

3 に答える 3