備忘録的プログラミングリファレンス

mask-mode プロパティ

　mask-mode プロパティは、マスク加工においてマスクするのは輝度（ luminance ）またはアルファチャンネル（ alpha ）にするかを選択するための CSS プロパティです。CSS では画像や動画などのコンテンツにマスク加工ができます。
　マスク加工に必要な画像または描写は mask-image プロパティを使用します。mask-image プロパティによるマスク画像に対して輝度（ luminance ）またはアルファチャンネル（ alpha ）を選択します。

mask-mode プロパティ
mask-image: url(img/test.png);
mask-mode: alpha;

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

　CSS によるマスク加工は web ページ上で実行することができます。コンテンツをあとからマスク加工して表示するのに便利です。

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

　制作上の注意点として、ローカルからの PNG などの画像ファイルの読み込みによるマスク加工はできません。サーバーからの読み込みの場合はできます。

　コンテンツのくり抜き表示は clip-path や background-clip によってもできますが、合成はできません。合成も行うには mask を使用します。

ページ内 Index

構文(Syntax)

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

CSS

mask-mode: match-source | alpha | luminance ;

DOM ( JavaScript )

値の取得
object.style.maskMode
値の設定
 object.style.maskMode = " match-source | alpha | luminance "

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

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

値（Values）

　以下は mask-mode プロパティに指定できる値です。

Value摘要
match-sourceデフォルト。mask-image プロパティの値が url() の場合は luminance、image() の場合は alpha
alphaアルファチャンネルを使用する。色が黒いほど透過する
luminance輝度。色が白いほど透過する

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

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

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

備考（Remarks）

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

初期値（Default value）match-source
継承（Inherited）no
変化（Animatable）no

Example

　mask-mode プロパティの例です。
　mask-mode プロパティは、マスク加工におけるアルファチャンネルまたは輝度の選択します。

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

　以下の例では、画像は PNG 形式のものを使用しています。mask-mode プロパティは alpha を指定しており、元画像の黒色のぼかしがあるため透過もぼかしで表示されます。

関連 CSS プロパティ

プロパティ概要
mask以下のプロパティを一括で指定
mask-imageマスクに使用する画像または描写
mask-modeマスク加工を輝度またはアルファチャンネルに
mask-positionマスク画像の表示開始位置
mask-sizeマスク画像の大きさ
mask-repeatマスク画像の繰り返し指定
mask-originマスク加工処理の起点
mask-clipマスクの処理範囲
mask-composite複数のマスクの合成方法

関連（Related）