Photoshopなどのグラフィックソフトで使用する乗算やオーバーレイなどのブレンドモードですが、CSSでも使用することができます。
mix-blend-mode
ブレンドモードを使用するには、前面に重なる要素に、CSSで mix-blend-mode を追加するだけでOKです。簡単ですね。＜HTML＞
|
1 2 3 |
<div class="background"> <img src="./sample.png" alt="透過PNG"> </div> |
＜CSS＞
|
1 2 3 |
img{ mix-blend-mode: multiply; /* 乗算 */ } |
画像と背景が重なるように配置し、div.background には背景色を付けました。
multiply で乗算表示になります。
ブレンドモード一覧
15種類のブレンドモードが存在します。各値は以下のように記述します。（上記サンプルコードの、multiplyの箇所を変更します）
| 値 | ブレンドモード |
|---|---|
| normal | 通常 |
| multiply | 乗算 |
| screen | スクリーン |
| overlay | オーバーレイ |
| darken | 比較（暗） |
| lighten | 比較（明） |
| color-dodge | 覆い焼き |
| color-burn | 焼き込み |
| hard-light | ハードライト |
| soft-light | ソフトライト |
| difference | 差の絶対値 |
| exclusion | 除外 |
| hue | 色相 |
| saturation | 彩度 |
| color | カラー |
| luminosity | 輝度 |
対応ブラウザ
これまではIEで非対応のため使用できませんでしたが、IEもいよいよお役目を終えるとのことですので（2022年06月予定）、今後CSSでも使用できるでしょう。YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/uWk3Q6cu0y8
