<blend-mode>

概要

<blend-mode> 型は、ブレンドモードを表すキーワードのコレクションです。

ブレンドモードは、レイヤーが重なったときにピクセルの最終的な色の値を計算する方法です。それぞれのブレンドモードは前景と背景の色の値 (それぞれトップカラー、ボトムカラーと呼びます) を取得して、計算を行って色の値を返します。最終的に見えるレイヤーは、ブレンドしたレイヤーの中で重なっているすべてのピクセルで、ブレンドモードの計算を行った結果です。

構文

形式文法: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

使用可能な値

normal

ボトムカラーがどのような色でも、トップカラーが最終的な色になります。
この効果は、2 枚の不透明な紙片を重ねた状況に似ています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: normal;
}

multiply

トップカラーとボトムカラーで乗算を行った結果が、最終的な色になります。
黒いレイヤーは、最終的に黒色のレイヤーへ近づけます。白いレイヤーは変化をもたらしません。
この効果は、透明なフィルムに印刷した画像を重ねた状況に似ています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: multiply;
}

screen

色を反転して乗算を行い、さらに色を反転した結果が最終的な色になります。
黒いレイヤーは変化をもたらしません。白いレイヤーは、最終的に白色のレイヤーへ近づけます。
この効果は、2 つの画像を投影スクリーンに映した状況に似ています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: screen;
}

overlay

ボトムカラーが暗い色であれば multiply、明るい色であれば screen の結果が最終的な色になります。
このブレンドモードは hard-light と同じですが、レイヤーが入れ替わっています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: overlay;
}

darken

カラーチャンネルごとに暗い方の値で構成した色が、最終的な色になります。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: darken;
}

lighten

カラーチャンネルごとに明るい方の値で構成した色が、最終的な色になります。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: lighten;
}

color-dodge

ボトムカラーを、反転したトップカラーで除算した結果が、最終的な色になります。
黒い前景は変化をもたらしません。背景色を反転した色を持つ前景は、完全に明るい色に導きます。
このブレンドモードは screen に似ていますが、完全に明るい色に近づけるためには背景色を反転した色と同程度に明るい前景が必要です。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: color-dodge;
}

color-burn

反転したボトムカラーをトップカラーで除算して、さらに反転した結果が最終的な色になります。
白い背景は変化をもたらしません。背景色を反転した色を持つ前景は、最終的に黒い画像へ近づけます。
このブレンドモードは multiply に似ていますが、最終的に画像を暗くするためには背景色を反転した色と同程度に暗い前景が必要です。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: color-burn;
}

hard-light

トップカラーが暗い色であれば multiply 、明るい色であれば screen の結果が最終的な色になります。
このブレンドモードは overlay と同じですが、レイヤーが入れ替わっています。
この効果は、背景に強烈なスポットライトを当てた状況に似ています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: hard-light;
}

soft-light

最終的な色は hard-light に似ていますが、よりソフトになります。
このブレンドモードは hard-light に似ています。
この効果は、背景に拡散光のスポットライトを当てた状況に似ています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: soft-light;
}

difference

2 つの色のうち明るい色から、暗い色を減算した結果が最終的な色になります。
黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: difference;
}

exclusion

最終的な色は difference に似ていますが、コントラストが低くなります。
difference と同様に、黒いレイヤーは変化をもたらしません。白いレイヤーは、もうひとつのレイヤーの色を反転します。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: exclusion;
}

hue

最終的な色はトップカラーの色調を持ちますが、 彩度および明度はボトムカラーの値を使用します。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: hue;
}

saturation

最終的な色はトップカラーの彩度を持ちますが、色調および 明度はボトムカラーの値を使用します。
彩度を持たない純粋なグレーの背景は、効果がありません。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: saturation;
}

color

最終的な色はトップカラーの色調および彩度を持ちますが、明度はボトムカラーの値を使用します。
この効果はグレーレベルを保持しており、前景に色をつけるために使用できます。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: color;
}

luminosity

最終的な色はトップカラーの明度を持ちますが、色調および 彩度はボトムカラーの値を使用します。
このブレンドモードは color と同じですが、レイヤーが入れ替わっています。

<div id="div"></div>

#div {
    width: 300px;
    height: 300px;
    background: url('https://mdn.mozillademos.org/files/8543/br.png'),
                url('https://mdn.mozillademos.org/files/8545/tr.png');
    background-blend-mode: luminosity;
}

ブレンドモードの補間

ブレンドモードを変更するとき、補間処理は行いません。すべての変更は、急に発生します。

仕様

ブラウザ実装状況

関連情報

• この型の値を使用するプロパティ: background-blend-mode および mix-blend-mode
• Blend modes
• CSS リファレンスの索引