CSS 마스크 사이즈 속성

정의와 사용법

mask-size 속성이 캔버스 이미지 크기를 지정합니다.

예제

예제 1

이미지 크기를 퍼센트 단위로 설정합니다:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 70%;
  mask-repeat: no-repeat;
}

직접 시도해 보세요

예제 2

이미지 크기를像素 단위로 설정합니다:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
  mask-size: 200px 200px;
  mask-repeat: no-repeat;
}

직접 시도해 보세요

CSS 문법

mask-size: auto|size|contain|cover|initial|thuộc về;

속성 값

값 설명
auto 기본 값
크기 캔버스의 크기를 지정합니다. px, em 등의 단위를 사용하거나 %를 사용할 수 있습니다.
contain 캔버스 내부에 적응할 수 있도록 캔버스를 확대합니다.
cover 캔버스의 너비와 높이를 모두 커버할 수 있도록 캔버스를 확대합니다.
기본 값: 이 속성을 기본 값으로 설정합니다. 참조 기본 값:。
thuộc về 이 속성을 부모 요소에서 继承 합니다. 참조 thuộc về。

기술 세부 사항

기본 값: auto
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS Masking 모듈 레벨 1
JavaScript 문법: object.style.maskSize="100px 200px"

브라우저 지원

표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
120 120 53 15.4 106

관련 페이지

교육:CSS 가시성

참조:CSS 마스크 속성

참조:CSS 마스크 클립 속성

참조:CSS 마스크 컴포지트 속성

참조:CSS 마스크 이미지 속성

참조:CSS 마스크 모드 속성

참조:CSS 마스크 오리진 속성

참조:CSS 마스크 포지션 속성

참조:CSS 마스크 리피트 속성

참조:CSS 마스크 타입 속성