PLAY CSS
jaen

エフェクト

mask-repeat

mask-repeat は、マスクの画像をくり返して敷き詰めるかどうかと、その並べ方を指定します。初期値の repeat はタイルのようにくり返すので、1 つだけ置くときは no-repeat にします。

構文<repeat-style># …
<repeat-style>#

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

プレビュー

プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  mask-image: url(/mask-star.svg);
  mask-size: 36px;
  mask-repeat: space;
}

コントロール

mask-repeatspace
横と縦を同じ値にする
mask-repeat

解説

並べ方は background-repeat と同じ

  • repeat：領域を覆うまでくり返します。初期値です。端に収まりきらない画像は途中で切れます。
  • space：切れずに収まる枚数だけ並べ、余った長さを画像どうしのすき間に均等に配ります。
  • round：割り切れないときは画像を伸び縮みさせて、ちょうどの枚数で並べます。
  • no-repeat：くり返さず、1 枚だけ置きます。

2 つ書くと、1 つ目が横、2 つ目が縦の並べ方になります。repeat-x は repeat no-repeat、repeat-y は no-repeat repeat と同じ意味です。それぞれの細かい決まりは background-repeat のページで説明しています。

すき間では要素が消える

マスクの画像が無い所は、透明なマスクとして扱われます。そのため space のすき間や、no-repeat で置いた画像の周りでは、要素そのものが見えなくなります。背景画像のすき間に背景色が見えるのとは違います。

気をつけること

  • 初期値が repeat なので、mask-size を小さくしたり、元の大きさが小さい画像を使ったりすると、思いがけず敷き詰められます。アイコンの形に 1 つだけ切り抜くなら no-repeat にします。
  • space と round が枚数を合わせるのは、マスクを置く領域（mask-origin、初期値は border の外側まで）です。padding までを基準にする背景とは違います。
  • カンマで区切ると、mask-image の層ごとに指定できます。
  • -webkit- の付かない名前に対応したのは、Chrome・Edge は 120、Safari は 15.4 からです。それより古いブラウザには -webkit-mask-repeat と書きます。
  • このページのプレビューでは、星の画像を 36px の大きさでマスクにしています。箱の右下をドラッグして大きさを変えると、space と round の枚数が変わるのを確かめられます。

参考リンク

MDN Web Docsmask-repeatSpecificationCSS Masking Module Level 1Can I usemask-repeat

コメント

PLAY CSS