モバイルで固定背景画像が壊れるのはなぜですか? CSS のみで修正するにはどうすればよいですか?

モバイルでの背景の問題の解決: スケーリングと繰り返しの解決

Web ページの開発では、モバイルで固定背景画像を適応させる際に課題が発生する場合があります。デバイス。デスクトップブラウザでは効果的であることが証明されている、background-size: cover や background: no-repeat center center fix などの CSS プロパティの使用を伴うソリューションは、iPhone や iPad では望ましい結果を生み出すことができません。

Toこの問題に対処するために、JavaScript の必要性を排除し、簡単な修正を提供する機知に富んだソリューションが登場しました。

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 要素に使用されるものと同様の多くの CSS プロパティを利用し、動作の一貫性を確保します。

z-index プロパティは負の値 -10 に設定されていることに注意してください。これは、擬似背景として表示される要素。 HTML ルート要素のデフォルトの z-index 値は 0 であるため、負の値を指定すると、疑似要素がページ上の他のすべての要素の後ろに配置されます。

以上がモバイルで固定背景画像が壊れるのはなぜですか? CSS のみで修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。