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

mask-clip プロパティ

　mask-clip プロパティは、マスク加工処理の範囲を指定するための CSS プロパティです。キーワードで指定した表示領域より内側が対象になります。
　マスク加工は margin、 border、padding、コンテンツ内容、全体、outline といった余白や罫線、内容の表示領域ごとに指定します。margin や 全体、outline がマスク加工の領域に指定できますが実際には border の表示領域以内にマスクは反映されるようです。

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

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

　mask-clip プロパティのみを指定するとマスク加工が切れているように表示されるかもしれません。それは、マスク加工の開始位置を変更することで変更することができます。
　マスク加工の開始位置を変更するには mask-origin プロパティを指定します。

　マスク画像または描写は mask-image プロパティを使用します。

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

ページ内 Index

構文(Syntax)

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

CSS

mask-clip: [ border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box ] ;

DOM ( JavaScript )

値の取得
object.style.maskClip
値の設定
 object.style.maskClip = " [ border-box | content-box | padding-box | margin-box | fill-box | stroke-box | view-box ] ";

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

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

値（Values）

　以下は mask-clip プロパティに指定できる値には以下があります。

Value摘要
border-boxデフォルト。border の表示領域以内が対象
content-box内容の表示領域
padding-boxpadding の表示領域以内
margin-boxmargin の表示領域以内。ただし、マスク加工の範囲は border 以内になる
fill-boxエレメントの内容の表示領域
stroke-boxoutline の表示領域以内。加工の範囲は border 以内になる
view-boxSVG データのマスク加工の起点に合わせる

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

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

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

備考（Remarks）

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

初期値（Default value）border-box
継承（Inherited）no
変化（Animatable）no

Example

　mask-clip プロパティの例です。mask-clip プロパティは、マスク加工処理の範囲が変更できます。デフォルトは border 領域以内で、margin、padding、コンテンツ内容、全体、outline と変更することができます。

　以下の例では、マスク画像の繰り返しを多くし mask-clip プロパティの起点の変化が分かりやすいようにしています。mask-size プロパティを 10% に指定し、マスク画像は 40% で透過するようにしています。
　mask-clip を padding-box に、mask-origin も padding-box に指定してあります。マスク加工が padding 領域の左上端で始まり、padding の表示領域内で収まっているはずです。

　border の表示領域以内はバックグランドの表示領域と同じなため関係があるのかを思いましたが、background-origin プロパティの値を変えても変化がないため関係はないようです。

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

関連 CSS プロパティ

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

関連（Related）