ホームページ >ウェブフロントエンド >CSSチュートリアル >iOS7 で固定背景画像がぼやけるのはなぜですか?どうすれば修正できますか?

iOS7 で固定背景画像がぼやけるのはなぜですか?どうすれば修正できますか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-12-23 12:25:10491ブラウズ

Why Are My Fixed Background Images Blurred in iOS7 and How Can I Fix Them?

iOS7 での背景画像の問題の修正

iOS7 で固定背景画像を使用すると、問題が発生する可能性があります。この問題は、特に iPad で背景画像が拡大されてぼやけて見える場合に発生します。これに対処するには、使用されている CSS コードを調べる必要があります。

ユーザーが提供したコード スニペットには、次の CSS 宣言が含まれています:

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

問題のある組み合わせは、背景の使用です。 -添付ファイル:背景付き固定-サイズ:カバー。このペアリングにより、iOS7 を含む多くのモバイル ブラウザとの互換性の問題が発生します。

解決策 1: Background-Attachment: Scroll

1 つのオプションは、background-attachment: fix を置き換えることです。背景添付: スクロール。これでは望ましい「固定」効果は得られませんが、少なくとも画像は表示されます。

解決策 2: 背景の位置: JavaScript でスクロールします

またはでは、background-position:scroll を使用して JavaScript を実装し、画像の位置をビューポートの上部に維持することができます。このアプローチには、少し高度なコーディングが必要ですが、より視覚的に魅力的なソリューションが提供されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。