mask-repeat プロパティ
mask-repeat プロパティは、マスク加工においてマスク画像の繰り返し表示の変更を指定するための CSS プロパティです。
マスク画像または描写は mask-image プロパティを使用します。マスク画像はデフォルトで繰り返し表示されます。mask-repeat によってその繰り返し表示の方法を変更することができます。
mask-image: url(img/test.png); mask-repeat: no-repeat;
詳しくは Example を参照してください
mask プロパティによって、mask-image、mask-mode、mask-position、mask-size、mask-repeat、mask-origin、mask-clip、mask-composite の一括指定ができます。
ページ内 Index
構文(Syntax)
mask-repeat プロパティの構文についてです。
CSS
mask-repeat: [ repeat | repeat-x | repeat-y | space | round | no-repeat ] ;
DOM ( JavaScript )
object.style.maskRepeat
object.style.maskRepeat = " [ repeat | repeat-x | repeat-y | space | round | no-repeat ] "
横方向と縦方向を２つの値で指定することもできます。
例えば以下は repeat-x と同じ意味です。
mask-repeat: repeat no-repeat;
mask-repeat プロパティの値は複数を指定することもできます。複数を指定する場合にはカンマ,
で区切ります。
値（Values）
以下は mask-repeat プロパティに指定できる値には以下があります。
| Value | 摘要 |
|---|---|
| repeat | デフォルト |
| repeat-x | 横方向にのみ繰り返す |
| repeat-y | 縦方向にのみ繰り返す |
| space | マスク画像が途中で切れる部分がないように、均等に繰り返し表示されます |
| round | マスク画像が途中で切れる部分がないように、マスク画像が拡大または縮小されます |
| no-repeat | 繰り返し表示されません |
以下のグローバル値も指定できます。
| キーワード値 | 機能 |
|---|---|
| initial | 仕様で決められた設定値 |
| inherit | 親エレメントの設定値を継承 |
| revert | ブラウザで設定された値 |
| unset | 継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ |
指定値を固定化する場合は !important 宣言を加えます。
備考（Remarks）
mask-repeat プロパティの備考についてです
| 初期値（Default value） | repeat |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
mask-repeat プロパティの例です。mask-repeat プロパティはマスク画像の繰り返し表示を変更することができます。
以下の例では、マスク画像が繰り返し表示されるように mask-size プロパティを 30% に指定してあります。mask-repeat: space; で均等に繰り返し表示されます。
制作上の注意点としてマスク加工はサーバーからの読み込み（ http プロトコルであることが必要 ）でないと正常に機能しません。端末でのファイル読み込みではマスクによる表示はされません。
関連 CSS プロパティ
| プロパティ | 概要 |
|---|---|
| mask | 以下のプロパティを一括で指定 |
| mask-image | マスクに使用する画像または描写 |
| mask-mode | マスク加工を輝度またはアルファチャンネルに |
| mask-position | マスク画像の表示開始位置 |
| mask-size | マスク画像の大きさ |
| mask-repeat | マスク画像の繰り返し指定 |
| mask-origin | マスク加工処理の起点 |
| mask-clip | マスクの処理範囲 |
| mask-composite | 複数のマスクの合成方法 |