CSS 마스크 속성
- 이전 페이지 marker-start
- 다음 페이지 mask-clip
정의와 사용법
mask 속성은 마스크나 잘라내기를 통해 요소를 숨기거나 (부분적으로나 전체적으로) 잘라내는 데 사용됩니다。
mask 속성은 다음 속성의 약자 형식입니다：
인스턴스
예제 1
이미지에 마스크 레이어를 생성합니다：
.mask1 {
mask: url(w3logo.png) no-repeat 50% 50%;
}
예제 2
이미지에 다른 마스크 레이어를 생성하기 위해 선형 및 径向 그레이덴을 사용합니다：
.mask1 {
mask: linear-gradient(black, transparent);
}
.mask2 {
mask: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
mask: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
예제 3
SVG <mask> 요소를 사용하여 이미지에 마스크 레이어를 생성합니다：
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
예제 4
SVG <mask> 요소를 사용하여 이미지에 마스크 레이어를 생성합니다：
<svg width="600" height="400">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
CSS 문법
mask-image: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-composite|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| mask-image | 요소 마스킹 레이어로 사용할 이미지를 지정합니다. 기본 값은 none입니다. |
| mask-mode |
마스킹 레이어 이미지가 밝기 마스킹으로 간주되거나 alpha 마스킹으로 간주되는지 지정합니다。 기본 값은 match-source입니다. |
| mask-repeat |
마스킹 이미지가 어떻게 반복되는지 설정합니다。 기본 값은 repeat입니다. |
| mask-position |
마스킹 이미지의 시작 위치(마스킹 위치 영역에 상대적으로)를 설정합니다。 기본 값은 0% 0%입니다. |
| mask-clip |
마스킹 이미지가 영향을 미치는 영역을 지정합니다。 기본 값은 border-box입니다. |
| mask-origin |
마스킹 레이어 이미지의 시작 위치(마스킹 위치 영역)을 지정합니다。 기본 값은 border-box입니다. |
| mask-size |
마스킹 레이어 이미지의 크기를 지정합니다。 기본 값은 auto입니다. |
| mask-composite |
현재 마스킹 레이어와 아래 마스킹 레이어가 사용하는合成 작업을 지정합니다。 기본 값은 add입니다. |
| initial | 이 속성을 기본 값으로 설정합니다. 참조: initial。 |
| inherit | 이 속성을 부모 요소에서 상속합니다. 참조: inherit。 |
기술 세부 사항
| 기본 값: | none match-source repeat 0% 0% border-box border-box auto add |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원하지 않습니다. 참조:애니메이션 관련 속성。 |
| 버전: | CSS Masking 모듈 레벨 1 |
| JavaScript 문법: | object.style.mask="url(star.svg)" |
브라우저 지원
표格에서의 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다。
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 120 | 120 | 53 | 15.4 | 106 |
관련 페이지
강의:CSS 셀러링
참조:CSS 마스크 속성
- 이전 페이지 marker-start
- 다음 페이지 mask-clip
