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

mask-image プロパティ

　mask-image プロパティは、コンテンツの表示をマスク加工するための画像や描写を指定するための CSS プロパティです。マスク加工は画像や動画などのコンテンツに使用できます。
　画像は SVG 形式や PNG 形式などを使用します。JPG 形式も使用できますが、mask-mode プロパティを指定する必要があります。

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

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

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

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

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

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

ページ内 Index

構文(Syntax)

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

CSS

mask-image: none | url() | image() | linear-gradient() ;

DOM ( JavaScript )

値の取得
object.style.maskImage
値の設定
 object.style.maskImage = " none | url() | image() | linear-gradient() "

　url() の引数は SVG 形式の画像がある場所です。

　image() と linear-gradient() は SVG 形式の画像を描写するためのファンクションです。

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

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

値（Values）

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

Value摘要
noneデフォルト。指定なしのこと
url()画像ファイルのある場所を指定
image()画像の描写ファンクション
linear-gradient()グラデーションの描写ファンクション

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

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

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

備考（Remarks）

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

初期値（Default value）none
継承（Inherited）no
変化（Animatable）no

Example

　mask-image プロパティの例です。
　mask-image プロパティは、コンテンツをマスク加工するための画像や画像処理方法を指定します。
　制作上の注意点として mask-image はサーバーからの読み込み（ http プロトコルであることが必要 ）でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。

　以下の例では、画像を JPG 形式のものを使用しています。JPG 形式の画像では mask-mode プロパティを指定する必要があります。luminance は白は透過します。alpha は色があるものは透過します。

関連 CSS プロパティ

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

関連（Related）