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

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

Web デザイナーは、固定された背景画像と視覚的に融合するテキストを作成するという課題に遭遇することがよくあります。効果的な解決策の 1 つは、スクロール 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% を追加することを検討してください。

Firefox や最新バージョンの Microsoft Edge など、CSS マスクをサポートするブラウザーでは、次の構文は次のとおりです。推奨:

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

このコードは、要素の下部をフェードアウトして背景を表示する垂直グラデーション マスクを作成します。画像。

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