| 属性名 | mix-blend-mode |
|---|---|
| 値 |
normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-lignt | soft-light | difference | exclutsion | hue | saturation | color | luminosity |
| 初期値 | normal |
| 適用可能要素 | 全ての要素 (SVGの場合はコンテナ要素、グラフィック要素、グラフィック参照要素) |
| 継承 | 継承しない |
| メディア | Visual |
| サポート | C2 / Fx32 / Ch41 / Op29 / Sa7.1 |
背景と要素が重なる部分の、色のブレンド方式を指定します。
| 値 | 説明 |
|---|---|
| normal | ブレンドしません。要素の色をそのまま表示します。 |
| multiply | 背景色と要素の色を掛け合わせた色にします。 |
| screen | 背景色の補色と、要素の色の補色を掛け合わせた色の補色を取ります。 |
| overlay | 背景色に応じて、multiply または screen されます。 |
| darken | 背景色と要素色の暗い方の色にします。 |
| lighten | 背景色と要素色の明るい方の色にします。 |
| color-dodge | 要素色を反映して背景色を明るくします。 |
| color-burn | 要素色を反映して背景色を暗くします。 |
| hard-lignt | 要素色に応じて、multiply または screen されます。背景に強いスポットライトを当てた具合になります。 |
| soft-light | 要素色に応じて、darken または lighten されます。背景に拡散スポットライトを当てた具合になります。 |
| difference | 背景色と要素色の差の絶対値とします。 |
| exclutsion | difference と同様ですが、コントラストが弱くなります。 |
| hue | 要素色の色相と、背景色の彩度と光度を合わせた色にします。 |
| saturation | 要素色の彩度と、背景色の色相と光度を合わせた色にします。 |
| color | 要素色の色相と彩度と、背景色の光度を合わせた色にします。 |
| luminosity | 要素色の光度と、背景色の色相と彩度を合わせた色にします。 |
.back {
background-color: #9f9;
}
.elem {
font-weight: bold;
font-size: 16pt;
color: #00f;
mix-blend-mode: darken;
}
<div class="back"> <div class="elem">MIX-BLEND MODE</div> </div>