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で透過

テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキスト
mix-blend-mode: soft-light; background-blend-mode: hard-light;

AREA

対応エリア:日本全国対応

CONTACT

家づくりに関するお問い合わせ・資料請求や、
長久手Studio・可児モデルハウスLITTLE KASHIMOへの
来場予約は、各フォームよりお問い合わせください。