透明に見せる3方式：背景を変えて比較

同じオリジナルSVGを使用。白いグラデーションで覆う方法と、透明度を変えるマスクを比較します。

① 背景画像＋グラデーション

説明テキスト

画像の上に白を重ねる。背景画像だけに適用。

② 疑似要素で白を重ねる

説明テキスト

画像と文字の上に白が重なる。下の柄は見えない。

③ 画像だけにmask-image

説明テキスト

下側で柄が見える。兄弟要素の文字は残る。

追加A：親要素へmask

この文字も薄くなる

画像だけでなく子要素の文字もマスクされる。

追加B：白→黒、alphaモード

どちらも不透明色なのでフェードしない。

この実行環境の記録

計測中

このページは独自の比較用デモです。Illustratorで書き出した画像でも、実サービスの管理画面でもありません。