トップページ  > CSS  > background-blend-mode

★CSSリファレンス

background-blend-mode …… 背景色と背景画像のブレンド方法を指定する
Google Chrome Safari Firefox Opera
広告

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="../images/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;
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ