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

mask-size プロパティ

 mask-size プロパティは、マスク加工においてマスク画像の大きさを指定するための CSS プロパティです。
 マスク画像または描写は mask-image プロパティを使用します。その大きさは mask-size によって指定します。

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

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

 mask プロパティによって、mask-imagemask-modemask-position、mask-size、mask-repeatmask-originmask-clipmask-composite の一括指定ができます。

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

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

ページ内 Index

構文(Syntax)

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

CSS

mask-size: [ auto | <length> | <percentage> ] | contain | cover ;

DOM ( JavaScript )

値の取得
object.style.maskSize
値の設定
 object.style.maskSize = " [ auto | <length> | <percentage> ] | contain | cover "

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

 グローバル値として initialinheritrevertunset も使用することができます。

値(Values)

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

Value摘要
autoデフォルト
<length> | <percentage>CSS の長さの単位
containバックグランドの表示領域の最大限の大きさに合わせて拡大縮小。マスク画像のアスペクト比を維持する。
coverバックグランドの表示領域の最小限の大きさに合わせて拡大縮小。マスク画像のアスペクト比を維持する。

 バックグランドの表示領域とは背景の大きさのことで、表示開始位置の指定によって変わります。表示開始位置の指定には borderの左上端( border-box )、padding の左上端( padding-box )または content 領域の左上端( content-box )があります。
 詳しくはbackground-origin プロパティページを参照してください。

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

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

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

備考(Remarks)

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

初期値(Default value)auto
継承(Inherited)no
変化(Animatable)Yes

Example

 mask-size プロパティの例です。mask-size プロパティはマスク画像の大きさを指定します。

 以下の例では、mask-size プロパティを 30% に指定してあります。繰り返し表示が機能しているために複数のマスク画像が表示されます。

 マスク画像に切れ目がなく表示するには mask-repeat: space; または round といった指定が必要になります。

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