mask-composite プロパティ

　mask-composite プロパティは、複数のマスク画像の合成方法を指定する CSS プロパティです。
　mask-image プロパティで複数のマスク画像または描写を指定した場合に機能します。

mask-image: url(img/test.png), url(img/test.png);
mask-composite: add;

詳しくは Example を参照してください

　mask プロパティによって、mask-image、mask-mode、mask-position、mask-size、mask-repeat、mask-origin、mask-clip、mask-composite の一括指定ができます。

構文(Syntax)

　mask-composite プロパティの構文についてです。

mask-composite: [ add | subtract | intersect | exclude ] ;

値の取得

object.style.maskComposite

値の設定

 object.style.maskComposite = " [ add | subtract | intersect | exclude ] "

　mask-composite プロパティの値は複数を指定することもできます。複数を指定する場合にはカンマ,で区切ります。

　グローバル値として initial、inherit、revert、unset も使用することができます。

　以下は mask-composite プロパティに指定できる値には以下があります。複数のマスク画像を合成しひとつのマスク画像にします。

　以上の mask-composite プロパティの値によるマスク画像の重なりは、以下の２つの円の重なりでは以下のようになります。

add

　add は複数のマスク画像を重ね合わせたものになります。

subtract

　subtract は１番上のマスク画像から以降の重ねわせから引いたものになります。

intersect

　intersect はすべてのマスク画像の重なった部分になります。

exclude

　exclude はすべてのマスク画像の重なった部分以外になります。

　以下のグローバル値も指定できます。

キーワード値	機能
initial	仕様で決められた設定値
inherit	親エレメントの設定値を継承
revert	ブラウザで設定された値
unset	継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ

　指定値を固定化する場合は !important 宣言を加えます。

　mask-composite プロパティの備考についてです

　mask-composite プロパティの例です。複数のマスク画像の合成方法を指定できます。

　以下の例では、同じマスク画像を mask-image で２つ有るようにしています。２つのマスク画像をずらして重ねています。

　制作上の注意点としてマスク加工はサーバーからの読み込み（ http プロトコルであることが必要）でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。