mask
mask CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.
참고: mask 는 mask-border (en-US)를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 mask 를 사용하는 것을 추천합니다. This will ensure that mask-border has 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 (en-US) element and all graphics elements |
| 상속 | no |
| Percentages | as each of the properties of the shorthand:
|
| Computed value | 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(en-US)를 확인하세요. <masking-mode>-
마스크 이미지의 마스킹 모드 설정하기.
mask-mode(en-US)를 확인하세요. <position>-
마스크 이미지의 위치 설정하기.
mask-position(en-US)를 확인하세요. <bg-size>-
마스크 이미지의 크기 설정하기.
mask-size(en-US)를 확인하세요. <repeat-style>-
마스크 이미지의 반복 설정하기. See
mask-repeat(en-US)를 확인하세요. <geometry-box>-
단 하나의 <geometry-box> 값만 주어진다면
mask-origin(en-US)와(과)(mask-clip(en-US) 모두 같은 값으로 설정하는 것을 의미합니다. 두개의<geometry-box> 값이 주어진다면 첫번째 값은mask-origin(en-US)을(를), 두번쨰 값은mask-clip(en-US)를 설정하는 것을 의미합니다. <geometry-box> | no-clip-
마스크 이미지에 영향을 받는 구역을 설정하기.
mask-clip(en-US)를 확인하세요. <compositing-operator>-
현재 마스크 레이어 위의 합성 설정하기.
mask-composite(en-US)를 확인하세요.
형식 구문
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 | start | end | <length-percentage> ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] |
[ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <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> =
<box> |
margin-box
<box> =
border-box |
padding-box |
content-box
예제
.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 |
브라우저 호환성
BCD tables only load in the browser