JavaScript を使用せずにモバイルデバイスで全画面の背景画像が繰り返される問題を修正する方法

トラブルシューティングの背景: モバイル デバイスで繰り返されない問題を修正しました

問題:

ユーザーは、完全な機能を実装するのが困難に直面しています。モバイル デバイス (iPhone および iPad) 上の固定位置の画面背景画像。背景のスタイル設定に CSS を使用しているにもかかわらず、画像が大きく表示され、下にスクロールすると画像が繰り返される傾向があります。

解決策:

この問題に対処するための、新しい解決策があります。 JavaScript を不要にする機能が登場しました。新しい CSS スニペットの導入:

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;
}

説明:

• body:before 疑似要素は、HTML ドキュメントの本文の前に追加の要素を作成します。 .
• 絶対配置により、要素は相対的に固定位置に留まります。 viewport.
• 負の Z インデックス (-10) を使用すると、要素をページの通常のコンテンツの背後に表示できます。
• 背景画像、その配置、拡大縮小、固定は次と同じです。デスクトップ ブラウザに使用されるオリジナルの CSS。

この手法にはベンダー プレフィックスがなく、ブラウザ間の互換性が排除されることに注意することが重要です。問題があります。

以上がJavaScript を使用せずにモバイルデバイスで全画面の背景画像が繰り返される問題を修正する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。