モバイル Safari で背景サイズ: カバーの問題を修正する方法?

CSS 背景サイズ: Mobile Safari のカバーの置換

CSS プロパティーの背景サイズ: カバーに関する Mobile Safari の予期しない動作により、代替ソリューションが必要です。この問題は、画像が iOS デバイス上のそれぞれの div を完全にカバーできないこととして現れます。

解決策:

この問題を解決するには、デフォルトの背景添付ファイルをオーバーライドする必要があります。 : モバイルデバイス上の固定プロパティ。 iPhone を対象としたメディア クエリで、background-attachment をスクロールするように設定すると、背景画像が望ましい動作を取り戻します。

.section {
  background-size: cover;
  background-attachment: scroll; /* Override fixed attachment */
}

@media (max-width: @iphone-screen) {
  .section {
    background-attachment: scroll;
  }
}

注: 変数 @iphone-screen は事前に定義されていることが期待されます。

このソリューションを実装すると、コンテンツの幅や高さに関係なく、背景画像が div 全体をシームレスにカバーします。背景サイズ: カバー プロパティが意図したとおりに機能するようになり、Mobile Safari で一貫した視覚的に魅力的なエクスペリエンスが提供されます。

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