モバイルデバイスの全画面背景画像の問題を解決する方法?

モバイル デバイスの背景画像の問題を解決する

背景画像が全画面に拡張され、アスペクト比が維持される Web ページを作成する場合、スクロール中に固定されたままになる場合、次のような CSS コードが考えられます。 used:

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

ただし、iPhone や iPad などのモバイル デバイスにこのコードを適用すると、十分にスクロールすると背景画像が大きくなり、繰り返し表示される可能性があります。

解決策は次のとおりです。以下に示すように、HTML 本文の一部として「before」疑似要素を作成する場合:

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

HTML のルート要素のデフォルトの z-index が 0 であるため、「before」疑似要素の z-index 値は負の数 (例: -10) に設定されます。この負の値により、背景が最下位レイヤーとして配置されます。

以上がモバイルデバイスの全画面背景画像の問題を解決する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。