概要

CSS の background-blend-mode プロパティは、要素の背景画像を互いに、あるいは要素の背景色とどのようにブレンドするかを示します。

ブレンドモードは background-image CSS プロパティと同じ順番で定義します。ブレンドモードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しおよび短縮されます。

初期値normal
適用対象全要素. In SVG, it applies to container elements, graphics elements, and graphics referencing elements.. It also applies to ::first-letter and ::first-line.
継承不可
メディアnone
計算値指定値
Animation typediscrete
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* 1 値 */
background-blend-mode: normal;

/* 2 値、背景ごとにひとつずつ */
background-blend-mode: darken, luminosity;

/* グローバル値 */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;

<blend-mode>
適用するブレンドモードを表す <blend-mode> です。カンマ区切りで複数の値を置くことができます。

形式文法

<blend-mode>#

where
<blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

仕様

仕様書 策定状況 コメント
Compositing and Blending Level 1
background-blend-mode の定義
勧告候補 最初期の定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 35 30.0 (30.0) 未サポート 22 7.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 30.0 (30.0) 未サポート 22 8

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss
最終更新者: yyss,