CSS ブレンドモード
CSSで画像や背景色をPhotoshopのレイヤーのように乗算や覆い焼きカラーなどを指定することが出来ます。
通常の状態
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
blend-modeを使用していない普通の状態です。 描画モードの違いがわかるように下に斜め線のパターンを敷いています。
オレンジ背景をrgbaで透過
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
blend-modeを使用せず、透過を施しました。背景を透かして見せたい時によく使うCSSです。
オレンジ背景をmix-blend-modeで乗算(multiply)を指定
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
mix-blend-modeを使うとオレンジ背景が乗算されますが、白いテキストまで透明になってしまいました。 Photoshopの場合、テキストの描画モードが通常であれば、テキストは白くなるのが普通です。
テキストをdivで囲い、そこにmix-blend-mode: normal;を指定
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
mix-blend-modeを初期値であるnormalで指定し直すとリセットできるのか試してみましたが、テキストは透明のままでした。
テキストをdivで囲い、そこにmix-blend-mode: multiply;を指定
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストに乗算(multiply)を指定するとテキストが消えてしまいます。
Photoshopで同じことをやるとしっかり同じ結果になりました。
オレンジ背景をbackground-blend-modeで透過
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
background-blend-modeを使うと、
テクスチャ背景をmix-blend-modeで透過
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テクスチャ背景をbackground-blend-modeで透過
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テクスチャ背景をmix-blend-modeで透過
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テクスチャ背景をbackground-blend-modeで透過
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキスト