最近、クライアントプロジェクトに取り組んでいる間、畫(huà)像に特定の視覚効果が必要でした。 background-attachment: fixed; 、この固定されたスクロール効果を簡(jiǎn)単に実現(xiàn)します。ページがスクロールしても、畫(huà)像は靜止したままです。この効果は、頻繁に使用されていませんが、特に微妙に適用される場(chǎng)合、非常に印象的です。

目次

• なぜ使用するのか<img alt="インライン畫(huà)像を使用した固定されたバックグラウンド効果の検索" >background-imageの代わりに？
• CSSのbackground-imageを使用します
• インライン畫(huà)像のclip-pathトリック
• より良いアプローチ？

最初は、インライン畫(huà)像を使用してこの固定効果を再現(xiàn)することを目指していました（<img alt="インライン畫(huà)像を使用した固定されたバックグラウンド効果の検索" > ）CSS背景畫(huà)像の代わりに。目的の効果のデモンストレーションはこちらから入手できます。このデモのコードはこのgitリポジトリにあります（注：これはnext.jsプロジェクトです）。生のHTMLを使用した簡(jiǎn)略化されたCodepenの例が続きます。

なぜ使用するのか<img alt="インライン畫(huà)像を使用した固定されたバックグラウンド効果の検索" >background-imageの代わりに？

いくつかの理由が私の好みを動(dòng)機(jī)付けました<img alt="インライン畫(huà)像を使用した固定されたバックグラウンド効果の検索" >タグ：

• 怠zyな読み込みが簡(jiǎn)単です。
• altテキストを介してSEOとアクセシビリティが改善されました。
• srcset / sizesを使用した最適化されたローディングパフォーマンス。
• ブラウザで最適化された畫(huà)像選択を介して<picture></picture>タグ。
• ユーザー向けの直接畫(huà)像保存（DevToolsなし）。

を使用して<img alt="インライン畫(huà)像を使用した固定されたバックグラウンド効果の検索" >畫(huà)像が単なる裝飾よりもコンテンツと見(jiàn)なされる場(chǎng)合、タグは一般に好ましいです。私のソリューションにはclip-path CSSプロパティが含まれていました。これをbackground-image法と比較しましょう。

1。CSS background-image使用

従來(lái)のアプローチではbackground-imageを使用します。

 .hero-section {
  background-image：url（ "nice_bg_image.jpg"）;
  バックグラウンドリピート：ノーリピート。
  バックグラウンドサイズ：カバー;
  バックグラウンドポジション：センター;
  背景攻撃：修正;
}

ただし、この方法には制限があります。畫(huà)像はコンテンツとして扱われず、アクセシビリティに影響を與えます（スクリーンリーダー）。また、畫(huà)像がビューポート內(nèi)に入ったり中心になった場(chǎng)合にのみ、最適に機(jī)能します。センター外の畫(huà)像には、さまざまなデバイスにわたって適切な位置決めのためにメディアクエリが必要です。

2。インライン畫(huà)像でclip-pathトリックを使用します

clip-pathを使用したスタックオーバーフローソリューションは、代替手段を提供します。

 .image-container {
  位置：相対;
  高さ：200px;
  クリップパス：Inset（0）;
}

。畫(huà)像 {
  オブジェクトフィット：カバー;
  位置：修正;
  左：0;
  上：0;
  幅：100％;
  高さ：100％;
}

このアプローチは維持されます<img alt="インライン畫(huà)像を使用した固定されたバックグラウンド効果の検索" >タグの利點(diǎn)。ただし、それはあまり簡(jiǎn)潔でなく、 clip-path課題を提示します。たとえば、 border-radiusのようなシンプルなスタイリングには、 clip-path自體を変更する必要があります。 clip-path內(nèi)の正確な畫(huà)像の位置は複雑です。

より良いアプローチ？

最終的に、私はCSSのbackground-imageを使用して、その制限を認(rèn)めました。誰(shuí)かがこの固定スクロール効果をよりエレガントな方法でインライン畫(huà)像で正常に実裝しましたか？あなたの解決策を聞いてくれてありがとう！

以上がインライン畫(huà)像を使用した固定されたバックグラウンド効果の検索の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。