モバイルデバイスの全画面背景画像の問題を解決する方法?-CSSチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-05 21:06:14

オリジナル

163 人が閲覧しました

How to Fix Full-Screen Background Image Issues on Mobile Devices?

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

背景画像が全画面に拡張され、アスペクト比が維持される 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 サイトの他の関連記事を参照してください。