CSS のみを使用してモバイルデバイスの背景画像のスケーリングの問題を解決する方法

モバイル デバイスでの背景画像のスケーリングの問題を修正

質問で提供されている CSS スタイルを HTML 要素に適用すると、スケーリングの望ましい効果が得られます背景画像を画面全体に合わせてアスペクト比を維持し、デスクトップ ブラウザ上の所定の位置に固定します。ただし、これらのスタイルは iPhone や iPad では同じ結果を生成できません。これらのデバイスでは、背景画像がビューポートを超えて広がり、下に十分にスクロールすると繰り返し表示されます。

この問題に対処するために、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;
}

この解決策は、:before 疑似クラスを使用して新しい要素を作成し、body 要素全体の上に絶対的に配置されます。背景画像は、必要なスケーリングおよび配置プロパティを使用してこの要素に割り当てられます。負の Z-index 値 -10 を設定すると、この要素がページ全体の背景になり、他のすべてのコンテンツの背後に残ります。

この手法は、モバイルで背景画像を修正するための簡単で効果的な方法を提供します。デバイスに対応し、元の CSS スタイルで発生する制限に対処します。

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