mix-blend-mode …… 背景色と要素のブレンド方法を指定する
広告
mix-blend-modeプロパティは、背景色と要素のブレンド方法を指定する際に使用します。
mix-blend-modeプロパティの各値を指定した際の表示結果は、
フォトショップなどのグラフィックソフトで、
下レイヤーと上レイヤーの色を掛け合わせたときの効果を想定するとイメージしやすいでしょう。
■値
- normal
- 通常 … 背景色をブレンドしない（初期値）
- multiply
- 乗算 … 絵具を混ぜたような結果となる
- screen
- スクリーン … スクリーンを重ねたような（光を掛け合わせたような）結果となる
- overlay
- オーバーレイ … 下レイヤー色に応じて、乗算、または、スクリーンで合成する。下レイヤー色が暗い色なら乗算でより暗く合成され、下レイヤー色が明るい色ならスクリーンでより明るく合成される
- darken
- 比較（暗） … 下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の低い（暗い）色を採用する
- lighten
- 比較（明） … 下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の高い（明るい）色を採用する
- color-dodge
- 覆い焼き … 明るい色はより明るくなり、画面は明るくコントラストは強くなる
- color-burn
- 焼き込み … 暗い色はより暗くなり、画面は濃くコントラストは強くなる
- hard-light
- ハードライト … 下レイヤー色と上レイヤー色の合成色に応じて、乗算、または、スクリーンで合成する。明るい色はスクリーンでより明るく、暗い色は乗算でより暗くなるため、強いライトを当てたような効果となる
- soft-light
- ソフトライト … 下レイヤー色と上レイヤー色の合成色に応じて、覆い焼き、または、焼き込みで合成する。明るい色は覆い焼きでより明るく、暗い色は焼き込みでより暗くなるため、ソフトなライトを当てたような効果となる
- difference
- 差の絶対値 … 下レイヤー色と上レイヤー色を比較して、数値の高い（明るい）ほうから低い（暗い）ほうを引く。白を掛け合わせると反転するが、黒を掛け合わせても変化しないため、部分的に反転したような結果となる
- exclusion
- 除外 … difference と似た結果となるが、よりコントラストが弱い
- hue
- 色相 … 下レイヤー色の輝度と彩度、および、上レイヤー色の色相を組み合わせた結果となる
- saturation
- 彩度 … 下レイヤー色の輝度と色相、および、上レイヤー色の彩度を組み合わせた結果となる
- color
- カラー … 下レイヤー色の輝度、および、上レイヤー色の色相と彩度を組み合わせた結果となる
- luminosity
- 輝度 … 下レイヤー色の色相と彩度、および、上レイヤー色の輝度を組み合わせた結果となる
■初期値・適用対象・値の継承
- 初期値
- normal
- 適用対象
- すべての要素。SVGでは、コンテナ要素、グラフィックス要素、グラフィックス参照要素に適用される
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
h5.m {
margin-bottom: 0;
}
div.murasaki {
background-color: purple;
width: 150px;
height: 200px;
}
HTMLソース
<p> サンプル要素として使用するのは、一部が透明なGIF画像です。<br> <img src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </p> <h5 class="m">mix-blend-mode: normal;</h5> <div class="murasaki"> <img style="mix-blend-mode: normal;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: multiply;</h5> <div class="murasaki"> <img style="mix-blend-mode: multiply;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: screen;</h5> <div class="murasaki"> <img style="mix-blend-mode: screen;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: overlay;</h5> <div class="murasaki"> <img style="mix-blend-mode: overlay;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: darken;</h5> <div class="murasaki"> <img style="mix-blend-mode: darken;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: lighten;</h5> <div class="murasaki"> <img style="mix-blend-mode: lighten;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: color-dodge;</h5> <div class="murasaki"> <img style="mix-blend-mode: color-dodge;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: color-burn;</h5> <div class="murasaki"> <img style="mix-blend-mode: color-burn;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: hard-light;</h5> <div class="murasaki"> <img style="mix-blend-mode: hard-light;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: soft-light;</h5> <div class="murasaki"> <img style="mix-blend-mode: soft-light;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: difference;</h5> <div class="murasaki"> <img style="mix-blend-mode: difference;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: exclusion;</h5> <div class="murasaki"> <img style="mix-blend-mode: exclusion;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: hue;</h5> <div class="murasaki"> <img style="mix-blend-mode: hue;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: saturation;</h5> <div class="murasaki"> <img style="mix-blend-mode: saturation;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: color;</h5> <div class="murasaki"> <img style="mix-blend-mode: color;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div> <h5 class="m">mix-blend-mode: luminosity;</h5> <div class="murasaki"> <img style="mix-blend-mode: luminosity;" src="https://htmqcom1.wpengine.com/wp-content/uploads/2024/07/michelangelo.gif"> </div>
↓↓↓
ブラウザ上の表示
サンプル要素として使用するのは、一部が透明なGIF画像です。
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;
広告