背景色のテキストブレンディング色

は、さまざまな左側の色で進行状況バーをスタイルすることを目指しています。失敗しました。また、フィルターを使用することを検討しました：Grayscale（1）Contrast（9）;、それは望ましい効果も生成しませんでした。この方法を使用することにより、ミックスブレンドモードの必要性を排除します。 幅：200px; 高さ：20px; 背景：線形勾配（右、＃43A047 50％、#EEE 0）; テキストアライグ：センター; } 。文章 { 背景：線形勾配（右、白い50％、黒0）; -webkit-background-clip：テキスト; バックグラウンドクリップ：テキスト; 色：透明; -webkit-text-fill-color：透過; font-weight：bold; }

このアプローチにより、テキストの色が黒（暗い左側のセクションで）と白（明るい左側のセクションで）の間の遷移が保証されます。