속성 mask-size

mask-size 속성은 마스크 이미지의 크기를 설정합니다. 픽셀/백분율로 구체적인 크기를 설정하거나 cover와 contain 키워드를 사용할 수 있습니다.

문법

css선택자 {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

값

예제 . cover 크기

마스크가 요소를 완전히 덮도록 확대/축소됩니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
}

Результат:

예제 . contain 크기

마스크가 요소 안에 완전히 들어오도록 확대/축소됩니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

Результат:

예제 . 픽셀 단위 고정 크기

150×150 픽셀 크기의 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 150px;
  mask-repeat: no-repeat;
}

Результат:

예제 . 백분율 크기

마스크가 요소 너비의 80%, 높이의 60%를 차지합니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 80% 60%;
  mask-repeat: no-repeat;
}

Результат:

예제 . 축별 다른 크기

너비 200px, 높이 100px 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 200px 100px;
  mask-repeat: no-repeat;
}

Результат:

함께 보기