CSS - mix-blend-mode

概要

属性名	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	要素色の光度と、背景色の色相と彩度を合わせた色にします。

CSS

.back {
  background-color: #9f9;
}
.elem {
  font-weight: bold;
  font-size: 16pt;
  color: #00f;
  mix-blend-mode: darken;
}

HTML

<div class="back">
 <div class="elem">MIX-BLEND MODE</div>
</div>

表示

MIX-BLEND MODE

初版：2015年11月8日、最終更新：2015年11月8日

https://www.tohoho-web.com/css/prop/mix-blend-mode.htm