mask
Baseline 2023Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
mask CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.
참고:
mask는mask-border를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는mask를 사용하는 것을 추천합니다. This will ensure thatmask-borderhas also been reset to allow the new styles to take effect.
| 초기값 | as each of the properties of the shorthand:
|
|---|---|
| 적용대상 | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:
|
| 계산 값 | as each of the properties of the shorthand:
|
| Animation type | as each of the properties of the shorthand:
|
| Creates stacking context | yes |
구문
/* 키워드 값 */
mask: none;
/* 이미지 값 */
mask: url(mask.png); /* 마스크로 사용되는 이미지 */
mask: url(masks.svg#star); /* 마스크로 사용되는 SVG 그래픽 내 요소 */
/* 조합형 값 */
mask: url(masks.svg#star) luminance; /* 밝기 조절용 마스크로 사용되는 SVG 그래픽 내 요소 */
mask: url(masks.svg#star) 40px 20px; /* 위로부터 40px, 아래부터 20px에 위치하는 마스크로 사용되는 SVG 그래픽 내 요소 */
mask: url(masks.svg#star) 0 0/50px 50px; /* 가로, 세로 각각 50px 사이즈의 마스크로 사용되는 SVG 그래픽 내 요소 */
mask: url(masks.svg#star) repeat-x; /* 수평으로 반복되는 마스크로 사용되는 SVG 그래픽 내 요소 */
mask: url(masks.svg#star) stroke-box; /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude; /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
/* 글로벌 값 */
mask: inherit;
mask: initial;
mask: unset;
값
<mask-reference>-
마스크 이미지 파일 설정하기.
mask-image를 확인하세요. <masking-mode>-
마스크 이미지의 마스킹 모드 설정하기.
mask-mode를 확인하세요. <position>-
마스크 이미지의 위치 설정하기.
mask-position를 확인하세요. <bg-size>-
마스크 이미지의 크기 설정하기.
mask-size를 확인하세요. <repeat-style>-
마스크 이미지의 반복 설정하기. See
mask-repeat를 확인하세요. <geometry-box>-
단 하나의 <geometry-box> 값만 주어진다면
mask-origin와(과)(mask-clip모두 같은 값으로 설정하는 것을 의미합니다. 두개의<geometry-box> 값이 주어진다면 첫번째 값은mask-origin을(를), 두번쨰 값은mask-clip를 설정하는 것을 의미합니다. <geometry-box> | no-clip-
마스크 이미지에 영향을 받는 구역을 설정하기.
mask-clip를 확인하세요. <compositing-operator>-
현재 마스크 레이어 위의 합성 설정하기.
mask-composite를 확인하세요.
형식 구문
mask =
<mask-layer>#
<mask-layer> =
<mask-reference> ||
<position> [ / <bg-size> ]? ||
<repeat-style> ||
<geometry-box> ||
[ <geometry-box> | no-clip ] ||
<compositing-operator> ||
<masking-mode>
<mask-reference> =
none |
<image> |
<mask-source>
<position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right ] && [ top | center | bottom ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}
<geometry-box> =
<shape-box> |
fill-box |
stroke-box |
view-box
<compositing-operator> =
add |
subtract |
intersect |
exclude
<masking-mode> =
alpha |
luminance |
match-source
<image> =
<url> |
<gradient>
<mask-source> =
<url>
<length-percentage> =
<length> |
<percentage>
<shape-box> =
<visual-box> |
margin-box
<url> =
<url()> |
<src()>
<visual-box> =
content-box |
padding-box |
border-box
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
예제
.target {
mask: url(#c1) luminance;
}
.anothertarget {
mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}
명세
| Specification |
|---|
| CSS Masking Module Level 1 # the-mask |