JavaScript を使用せずにモバイル デバイスで固定背景画像を作成するにはどうすればよいですか?

固定背景の方法: モバイルの視点

さまざまなデバイス間でシームレスに拡張できる背景画像を使用して Web ページの美しさを向上させることは、難しい場合があります。特に、iPhone や iPad などのモバイル プラットフォームで固定の背景効果を実現するには、特有のハードルが存在します。

この問題に対処するために、background-size: cover や background などのプロパティを組み込んだ CSS ソリューションが広く採用されています。 -アタッチメント:固定。ただし、モバイル デバイスでは動作が不安定になるため、過度に大きな背景画像がビューポートを超えて表示され、過剰なスクロールが繰り返し表示されます。

幸いなことに、JavaScript に頼らずにこれらの制限を克服する代替アプローチが登場しました。 body:before 疑似要素を導入することで、モバイル デバイス上に固定背景を作成できます。

このアプローチの 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;
}

このメソッドは、疑似要素を作成します。 - Web ページ上の他のすべての要素の背後に配置される要素。その結果、モバイル デバイス上で適切に拡大縮小される非侵入的な固定背景が得られます。負の z-index 値により、擬似要素がバックグラウンドに残ることが保証されます。

このソリューションを実装することで、開発者は、モバイルを含むすべてのデバイスでのユーザー エクスペリエンスを向上させる固定背景画像を使用して、視覚的に魅力的な Web ページを効果的に作成できます。プラットフォーム。

以上がJavaScript を使用せずにモバイル デバイスで固定背景画像を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。