background-blend-mode

概要

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
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

構文

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

仕様

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

ブラウザ実装状況

機能 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,