CSS３からの新機能「background-blend-mode」を使用すれば、PhotoshopやIllustratorで使用できる「透明効果」と同じ様な画像処理ができます。
元画像
掛け合わせる画像
掛け合わせ（乗算）
メリット
CSS３からの新機能「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 | 輝度 |
コメント
[…] CSS3のブレンドモードで背景画像の上に画像を重ねる […]