mask-repeatCSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。

/* 一つの値の構文 */
mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

/* 二つの値の構文: horizontal | vertical */
mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

/* 複数の値 */
mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;

/* グローバル値 */
mask-repeat: inherit;
mask-repeat: initial;
mask-repeat: unset;

既定では、繰り返された画像は要素の寸法でクリッピングされますが、 (round を使用して) 大きさが合うように拡大縮小したり、 (space を使用して) 端から端まで等分に配分したりすることができます。

初期値no-repeat
適用対象すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。
継承なし
メディア視覚
計算値Consists of two keywords, one per dimension
アニメーションの種類個別
正規順序構文通り

構文

1つ以上の <repeat-style> 値をコンマ区切りで指定します。

<repeat-style>
単一の値の構文は、二つの値の構文の一括指定です。
単一の値 同等の二つの値
repeat-x repeat no-repeat
repeat-y no-repeat repeat
repeat repeat repeat
space space space
round round round
no-repeat no-repeat no-repeat
二つの値の構文では、最初の値が水平方向の繰り返しの動作を表し、二番目の値が垂直方向の動作を表します。それぞれのオプションが各方向にどのように動作するのかを説明します。
repeat 画像がマスク描画領域全体を埋めるのに必要なだけ繰り返されます。最後の画像は合わない時には切り取られます。
space 画像は切り取られずにできる限り繰り返されます。最初と最後の画像は要素の両端に位置し、画像間に均等に余白が配分されます。 mask-position プロパティは、1つだけの画像が切り取られずに表示される場合を除いて無視されます。 space を使用して切り取りが発生するのは、1つの画像を表示する十分な大きさがない場合だけです。
round 利用できる空間の寸法が拡大した場合、繰り返される画像は (すき間をおかずに) もう一つ追加するだけの余地ができるまで引き伸ばされます。次の画像が追加されるとき、現在の画像は場所を空けるために縮小されます。例えば、元の幅が 260px の画像が3回繰り返されたとき、それぞれの反復の幅は 300px まで拡大する可能性があり、もう一つの画像が追加されると、 225px まで縮小されます。
no-repeat 画像は繰り返されません (また、描画領域のマスクは全体を覆うとは限りません)。繰り返されないマスク画像の位置は mask-position CSS プロパティで定義されます。

形式文法

<repeat-style>#

where
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}

単一の値

CSS

#masked {
  width: 250px;
  height: 250px;
  background: blue linear-gradient(red, blue);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-repeat: repeat; /* Can be changed in the live sample */
  margin-bottom: 10px;
}

複数のマスク画像の対応

それぞれのマスク画像に異なる <repeat-style> を、コンマ区切りで指定することができます。

.examplethree {
  mask-image: url('mask1.png'), url('mask2.png');
  mask-repeat: repeat-x, repeat-y;
} 

それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。

仕様書

仕様書 状態 備考
CSS Masking Module Level 1
mask-repeat の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
mask-repeat
実験的
Chrome 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 18Firefox 完全対応 53IE ? Opera ? Safari 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 2
接頭辞付き
完全対応 2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android ? Edge Mobile ? Firefox Android 完全対応 53Opera Android ? Safari iOS 完全対応 3.2
接頭辞付き
完全対応 3.2
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,