mask-size プロパティ
mask-size プロパティは、マスク加工においてマスク画像の大きさを指定するための CSS プロパティです。
マスク画像または描写は mask-image プロパティを使用します。その大きさは mask-size によって指定します。
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-size プロパティの構文についてです。
CSS
DOM ( JavaScript )
mask-size プロパティの値は複数を指定することもできます。複数を指定する場合にはカンマ,
で区切ります。
値(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 プロトコルであることが必要 )でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。
関連 CSS プロパティ
プロパティ | 概要 |
---|---|
mask | 以下のプロパティを一括で指定 |
mask-image | マスクに使用する画像または描写 |
mask-mode | マスク加工を輝度またはアルファチャンネルに |
mask-position | マスク画像の表示開始位置 |
mask-size | マスク画像の大きさ |
mask-repeat | マスク画像の繰り返し指定 |
mask-origin | マスク加工処理の起点 |
mask-clip | マスクの処理範囲 |
mask-composite | 複数のマスクの合成方法 |