CSSbackground-blend-mode プロパティは、要素の背景画像を互いに、または要素の背景色と、どのように混合するかを設定します。

混合モードは background-image プロパティと同じ順番で定義してください。混合モードのリストと背景画像のリストの長さが異なる場合は、長さが合うまで繰り返しや短縮が行われます。

構文

/* 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>#

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 の定義
勧告候補 初回定義

初期値normal
適用対象すべての要素。 SVG では、コンテナー要素、グラフィック要素、グラフィック参照要素に適用されます。。 ::first-letter and ::first-line にも適用されます。
継承なし
メディアnone
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-blend-modeChrome 完全対応 35Edge 未対応 なし
補足
未対応 なし
補足
補足 EdgeHTML 18 has an Enable CSS background-blend-mode property flag, however the feature is an early prototype with no discernable end-user effect.
Firefox 完全対応 30IE 未対応 なしOpera 完全対応 22Safari 完全対応 ありWebView Android 未対応 なしChrome Android 完全対応 35Edge Mobile 未対応 なしFirefox Android 完全対応 30Opera Android 完全対応 22Safari iOS 完全対応 8Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。

関連情報

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

このページの貢献者: mdnwebdocs-bot, mfuji09, yyss
最終更新者: mdnwebdocs-bot,