background-blend-mode …… 背景色と背景画像のブレンド方法を指定する
広告
background-blend-modeプロパティは、背景色と背景画像のブレンド方法を指定する際に使用します。
background-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;
background-image: url(../images/michelangelo.gif);
background-repeat: no-repeat;
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">background-blend-mode: normal;</h5> <div class="murasaki" style="background-blend-mode: normal;"> </div> <h5 class="m">background-blend-mode: multiply;</h5> <div class="murasaki" style="background-blend-mode: multiply;"> </div> <h5 class="m">background-blend-mode: screen;</h5> <div class="murasaki" style="background-blend-mode: screen;"> </div> <h5 class="m">background-blend-mode: overlay;</h5> <div class="murasaki" style="background-blend-mode: overlay;"> </div> <h5 class="m">background-blend-mode: darken;</h5> <div class="murasaki" style="background-blend-mode: darken;"> </div> <h5 class="m">background-blend-mode: lighten;</h5> <div class="murasaki" style="background-blend-mode: lighten;"> </div> <h5 class="m">background-blend-mode: color-dodge;</h5> <div class="murasaki" style="background-blend-mode: color-dodge;"> </div> <h5 class="m">background-blend-mode: color-burn;</h5> <div class="murasaki" style="background-blend-mode: color-burn;"> </div> <h5 class="m">background-blend-mode: hard-light;</h5> <div class="murasaki" style="background-blend-mode: hard-light;"> </div> <h5 class="m">background-blend-mode: soft-light;</h5> <div class="murasaki" style="background-blend-mode: soft-light;"> </div> <h5 class="m">background-blend-mode: difference;</h5> <div class="murasaki" style="background-blend-mode: difference;"> </div> <h5 class="m">background-blend-mode: exclusion;</h5> <div class="murasaki" style="background-blend-mode: exclusion;"> </div> <h5 class="m">background-blend-mode: hue;</h5> <div class="murasaki" style="background-blend-mode: hue;"> </div> <h5 class="m">background-blend-mode: saturation;</h5> <div class="murasaki" style="background-blend-mode: saturation;"> </div> <h5 class="m">background-blend-mode: color;</h5> <div class="murasaki" style="background-blend-mode: color;"> </div> <h5 class="m">background-blend-mode: luminosity;</h5> <div class="murasaki" style="background-blend-mode: luminosity;"> </div>
↓↓↓
ブラウザ上の表示
背景画像として使用するのは、一部が透明なGIF画像です。
background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: color-burn;
background-blend-mode: hard-light;
background-blend-mode: soft-light;
background-blend-mode: difference;
background-blend-mode: exclusion;
background-blend-mode: hue;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;
広告