CSS|ブレンドモードで背景の上に画像を重ねる方法

Tips

CSS3からの新機能「background-blend-mode」を使用すれば、PhotoshopやIllustratorで使用できる「透明効果」と同じ様な画像処理ができます。

sponcered link

使用例

元画像
掛け合わせる画像
掛け合わせ(乗算)

メリット

CSS3からの新機能「background-blend-mode」を使用すれば、PhotoshopやIllustratorで使用できる「透明効果」と同じ様な画像処理ができます。

[siteorigin_widget class=”WP_Widget_Custom_HTML”][/siteorigin_widget]
[siteorigin_widget class=”WP_Widget_Custom_HTML”][/siteorigin_widget]

Break

mix-blend-modeの機能一覧

「background-blend-mode:◯◯◯◯;」を変更すると、各画像処理を行います。
いつもは日本語で見ているので、英語の対応表を作りました。

英語日本語
darken比較(暗)
lighten比較(明)
multiply乗算
color-burn焼きこみ
screenスクリーン
color-dodge覆い焼き
overlayオーバーレイ
soft-lightソフトライト
hard-lightハードライト
difference差の絶対値
exclusion除外
hueHSL色相
saturationHSL彩度
colorHSLカラー
luminosityHSL輝度

コメント

  1. […] CSS3のブレンドモードで背景画像の上に画像を重ねる […]