mask-repeat
は CSS プロパティで、マスク画像をどのように繰り返すかを設定します。マスク画像は水平軸、垂直軸、両方の軸で繰り返すか、まったく繰り返さないようにすることができます。
/* 一つの値の構文 */
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;
}
HTML
<div id="masked">
</div>
<select id="repetition">
<option value="repeat-x">repeat-x</option>
<option value="repeat-y">repeat-y</option>
<option value="repeat" selected>repeat</option>
<option value="space">space</option>
<option value="round">round</option>
<option value="no-repeat">no-repeat</option>
</select>
JavaScript
var repetition = document.getElementById("repetition");
repetition.addEventListener("change", function (evt) {
document.getElementById("masked").style.maskRepeat = evt.target.value;
});
複数のマスク画像の対応
それぞれのマスク画像に異なる <repeat-style>
を、コンマ区切りで指定することができます。
.examplethree {
mask-image: url('mask1.png'), url('mask2.png');
mask-repeat: repeat-x, repeat-y;
}
それぞれの画像は最初のものから最後のものに向けて、それぞれの繰り返しスタイルに対応します。
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Masking Module Level 1 mask-repeat の定義 |
勧告候補 | 初回定義 |
ブラウザーの対応
BCD tables only load in the browser
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。