PLAY CSS
jaen

エフェクト

mask-size

mask-size は、マスクの画像を描く大きさを指定します。書き方は background-size と同じで、幅と高さを直接書くほか、cover と contain で要素に合わせて伸び縮みさせられます。

構文

<bg-size>#

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

プレビュー

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

コード

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  mask-image: url(/mask-star.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 50%;
}

コントロール

mask-size50%
mask-size
width
height

解説

cover と contain

  • cover は縦横比を保ったまま、要素をすき間なく覆う最小の大きさにします。はみ出した部分は使われません。
  • contain は縦横比を保ったまま、画像全体が収まる最大の大きさにします。余った所には、mask-repeat が初期値の repeat なら画像がくり返され、no-repeat なら要素が見えなくなります。

幅と高さ

1 つだけ書くと幅になり、高さは auto（縦横比を保つ）になります。2 つ書くと縦横比は崩れます。% はマスクを置く領域に対する割合で、その領域は初期値では border の外側までです（mask-origin: border-box）。padding までを基準にする背景とは違います。初期値は auto で、画像の元の大きさになります。

気をつけること

  • マスクの画像が届かない所では、要素は見えなくなります。背景画像なら余った所に背景色が見えますが、マスクでは何も描かれません。
  • mask-repeat の初期値は repeat なので、小さくすると敷き詰められます。アイコンの形に 1 つだけ切り抜くなら no-repeat と組み合わせます。
  • グラデーションには元の大きさがないので、auto だと領域いっぱいに描かれます。
  • mask ショートハンドの中では、位置のあとに / を挟んで書きます（mask: url(star.svg) center / contain no-repeat）。
  • -webkit- の付かない名前に対応したのは、Chrome・Edge は 120、Safari は 15.4 からです。それより古いブラウザには -webkit-mask-size と書きます。
  • このページのプレビューでは、透明な地に星を描いた画像（96×96）をマスクにして、くり返さずに中央に置いています。

参考リンク

MDN Web Docsmask-sizeSpecificationCSS Masking Module Level 1Can I usemask-size

コメント

PLAY CSS