CSS 마스크 이미지 속성
- 이전 페이지 mask-composite
- 다음 페이지 mask-mode
정의 및 사용법
mask-image 속성은 요소의 마스크 레이어로 사용할 이미지를 지정합니다.
추천사：CSS의 선형 그레이드 및 원형 그레이드는 마스크 이미지로도 사용될 수 있습니다.
예제
예제 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: 선형 그레이드(검정, 투명);
mask-image: 선형 그레이드(검정, 투명);
}
.mask2 {
-webkit-mask-image: 원형 그레이드(circle, 검정 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: 원형 그레이드(circle, 검정 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
-webkit-mask-image: 원형 그레이드(검정 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: 원형 그레이드(검정 50%, rgba(0, 0, 0, 0.5));
}
예제 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: none|image|url()|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| none | 기본 값。罩罩图像不被使用。 |
| image | 罩罩层的图像。 |
| url() | 이미지나 SVG <mask> 요소의 URL 참조. |
| initial | 이 속성을 기본 값으로 설정합니다. 참고: initial。 |
| inherit | 부모 요소에서 이 속성을 상속합니다. 참고: inherit。 |
기술 세부 사항
| 기본 값: | none |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원하지 않습니다. 참고:애니메이션 관련 속성。 |
| 버전: | CSS Masking 모듈 레벨 1 |
| JavaScript 문법: | object.style.maskImage="url(star.svg)" |
브라우저 지원
표에 나타난 숫자는 해당 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
‘-webkit-’ 접두사를 가진 숫자는 해당 접두사를 최초로 지원한 버전을 나타냅니다.
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 120 | 120 | 53 | 15.4 | 15 -webkit- |
관련 페이지
강의:CSS 가시성
참조:CSS 마스크 속성
- 이전 페이지 mask-composite
- 다음 페이지 mask-mode
