mix-blend-mode

概要

CSS の mix-blend-mode プロパティは要素の内容物と、下にある要素の内容物や要素の背景色ををどのようにブレンドするかを示します。

初期値normal
適用対象all HTML elements
継承不可
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序
Creates stacking context継承する

構文

/* キーワード値 */
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

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

<blend-mode>
適用するブレンドモードを表す <blend-mode> です。

形式文法

<blend-mode>

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>
circle { mix-blend-mode: screen; }

結果

仕様

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 41.0 32.0 (32.0) ? (有) 8.0
SVG 未サポート 32.0 (32.0) ? 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 41.0 32.0 (32.0) ? ? 8.0
SVG 未サポート 32.0 (32.0) ? 未サポート 未サポート

関連情報

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

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