CSS グラデーション マスクでテキストを背景にフェードインできますか?

CSS のグラデーション マスクによるテキストのフェードアウト

Q: CSS でグラデーション マスクを適用して、テキストを背景にフェードインすることは可能ですか?

A: 確かに!最新の CSS 機能を使用すると、テキストに微妙なフェード効果を作成できます。

互換性を最大限に高めるには、Webkit のグラデーション構文を使用できます。

-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 を調整できます。

Firefox との互換性を確保するには、mask-image プロパティを使用して、スタイルシートに Base64 でエンコードされた SVG 画像を埋め込むことができます。

このテクニックを実装すると、ユーザーが下にスクロールするにつれてテキストが背景にフェードインするという望ましい効果を実現し、見た目にも美しい読み物を提供できます。体験してください。

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