右端からフェードインし、左端からフェードアウトするテキストを含む CSS マーキーを作成しようとしています。文字の端だけが透明になります。これを「不透明マスク」と呼び、左右の端にぼかします。

CSS マーキーのコード例は見つかりますが、このようなフェードイン/フェードアウト効果を備えたものはありません。また、背景を完全に透明にして、テキストのみにエッジ効果を持たせたいと考えています。

コンテナにグラデーションを追加しようとしましたが、後から考えると、それは正しいパスではないようです。以下は私がこれまでに思いついたコードです。助けてください、ありがとう！

@Bernard Borg: 2 番目の新しい例でコードを更新しました。それ以上は、不透明度は使用されません。つまり、A) 基礎となる背景色へのハードコーディングに依存し、B) 単色の背景のみで動作します。 - これは、私のユースケースでは許容可能です。ありがとう！ (色の代わりに不透明度でマーキーをオーバーレイする方法はありますか?)

リーリー リーリー