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

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

ユーザーがスクロールするときにテキストが背景にスムーズに移行するようにしますか?その場合、スクロールする div の上部にある背景にグラデーション マスクを適用することが必要な解決策になる可能性があります。

解決策:

幸いなことに、Webkit は便利な機能を提供しています。このための CSS オプション:

-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% を追加します。

Mozilla (Gecko) Fallback:

元々、Firefox には SVG マスク画像が必要でしたが、しかし、マスクイメージをサポートするようになりました。

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