インライン画像を使用した固定されたバックグラウンド効果の検索

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

目次

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

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

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

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

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

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

1。CSS background-image使用

従来のアプローチではbackground-imageを使用します。

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

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

2。インライン画像でclip-pathトリックを使用します

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

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

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

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

より良いアプローチ？

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

以上がインライン画像を使用した固定されたバックグラウンド効果の検索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。