背景サイズ: カバーがモバイル Safari で機能しないのはなぜですか?

Mobile Safari での背景画像のカバー

Mobile Safari の、background-size: cover プロパティによる独特の動作はイライラさせることがあります。多くの場合、画像は div 全体をカバーするのではなく、ビューポートの幅の影響を受けずに中央に配置されたままになります。ただし、この問題はいくつかの変更を加えることで簡単に解決できます。

解決策:

Mobile Safari であっても、背景画像が div 全体を覆うようにするには、 Background-attachment プロパティ:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section2 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

#section3 {
  background: url(...) 50% 0 no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

仕組み:

background-attachment:scroll を設定することで、画像がページのコンテンツに合わせてスクロールできるようになりました。 。これにより、デバイスやビューポートの幅に関係なく、画像が常に div の全幅をカバーすることが保証されます。

このソリューションは、Mobile Safari のbackground-size: cover の動作を効果的に置き換え、完全な幅を簡単に作成できるようにします。 -width さまざまな画面サイズに対応する背景画像。

以上が背景サイズ: カバーがモバイル Safari で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。