CSS グラデーション マスクを使用してテキストを背景にフェードインするにはどうすればよいですか?

グラデーション マスクを適用してテキストを背景にフェードインする

はじめに

完全な画面の背景画像をスクロール div に固定すると、ユーザーがスクロールするときに上にあるテキストがスムーズにフェードアウトするという課題が発生することがよくあります。 下。この記事では、CSS でグラデーション マスクを使用した解決策について説明します。

質問

CSS でグラデーション マスクを適用して、テキストを一部だけ背景にフェードインするにはどうすればよいですか?要素の段階的なフェードを作成します効果?

回答

Webkit の -webkit-mask-image プロパティを使用すると、目的の効果を実現できます:

-webkit-mask-image: -webkit-gradient(
    linear,
    left 90%,
    left bottom,
    from(rgba(0, 0, 0, 1)),
    to(rgba(0, 0, 0, 0))
);

このコードは要素の上部の不透明な黒から下部 10% の透明までフェードする線形グラデーション。要素にpadding-bottom: 50%を追加することで、スクロールすべき内容がさらにある場合にのみコンテンツがフェード表示されるようにすることができます。

Notes

• このソリューションは Webkit 独自の -webkit-mask-image に依存しているため、ブラウザーの互換性が必要です。 property.
• Mozilla (Gecko) には、入力として SVG 画像を必要とする同様の「マスク」機能があり、base64 エンコーディングを使用して埋め込むことができます。

以上がCSS グラデーション マスクを使用してテキストを背景にフェードインするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。