mix-blend-mode プロパティ
mix-blend-mode プロパティは、複数の背景画像や配色を混ぜ合わせる（ブレンドする）方法を指定するプロパティです。mix-blend-mode プロパティは複数のエレメントどうしや画像どうしをブレンドする場合に使います。
ブレンドするプロパティには background-blend-mode があります。背景画像である場合は background-blend-mode プロパティを使います。
mix-blend-mode: multiply;
詳しくは Example を参照してください
テキストを背景色の反対色で表示
mix-blend-mode プロパティを使ってテキストの色を背景色の反対色に指定することもできます。
p{
mix-blend-mode: difference;
}
詳しくは Example を参照してください
値は、difference または、 exclusion を指定します。
配色がはっきりさせたい時は、 filter プロパティを使用する方法があります。
ページ内 Index
構文(Syntax)
CSS
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity;
DOM ( JavaScript )
String = object.style.mixBlendMode;
object.style.mixBlendMode=" normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | difference | exclusion | hue | saturation | color | luminosity";
値（Values）
| Value | 摘要 |
|---|---|
| normal | 初期値（default値） |
| multiply | ブレンドする |
| screen | スクリーンを覆ったような |
| overlay | 薄くおおう |
| darken | 暗め |
| lighten | 明るめ |
| color-dodge | 覆い焼き表示 |
| color-burn | 焼き込み |
| difference | 差の絶対値 |
| exclusion | differenceよりコントラストが弱い |
| hue | 上の色調と下の色の彩度および明度 |
| saturation | 最も彩度が高い色による印象表示 |
| color | 色による印象表示 |
| luminosity | 白黒表示 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | normal |
| 継承（Inherited） | No |
| CSS Animation | No |
Example
mix-blend-modeの表示例です。<img> エレメントと <p> エレメントを重ねて、mix-blend-mode プロパティで色を調整しています。
mix-blend-mode の表示例です
はテキストですが、写真との重なりで色が調整されています。
画像は「写真AC」から利用させていただきました。