iOS 7 との固定背景画像の互換性
固定背景画像を実装する場合、さまざまなデバイス間での互換性を確保することが重要です。ブラウザ。ただし、iOS 7 では特定の問題が発生する可能性があります。
最近、あるユーザーは、iOS 7 を実行している iPad 上で Web サイトの背景画像が拡大表示され、ぼやけて見えるという状況に遭遇しました。ユーザーは次の 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; }
この問題を解決するには、いくつかの解決策が考えられます。
オプション 1: を使用します。 Background-Attachment
1 つのアプローチは、background-attachment: 固定ではなくスクロールを使用することです。この方法では、固定背景の意図した効果は得られませんが、モバイル ブラウザで画像を表示できるようになります。
オプション 2: 背景位置と JavaScript を使用する
代わりに、background-position:scroll を設定して JavaScript を組み込んで、スクロールされた位置に画像を保持し、固定背景を効果的に「偽装」することもできます。サンプル実装は次のとおりです:
// Calculate the initial scroll position var scrollPosition = window.scrollY; // Add an event listener for the scroll event window.addEventListener("scroll", function () { // Update the scroll position as the user scrolls scrollPosition = window.scrollY; // Set the background position to be scrolled with the window document.querySelector(".header").style.backgroundPosition = "center " + scrollPosition + "px"; });
この JavaScript アプローチは、iOS 7 デバイスで固定背景効果を維持しながら、ぼやけたりズームインされた画像の問題を回避する動的なソリューションを提供します。
以上がiOS 7デバイスでぼやけた背景画像を修正する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。