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: mask-image (en-US): `none` mask-mode (en-US): `match-source` mask-repeat (en-US): `no-repeat` mask-position (en-US): `center` mask-clip (en-US): `border-box` mask-origin (en-US): `border-box` mask-size (en-US): `auto` mask-composite (en-US): `add`
적용대상	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: mask-position (en-US): refer to size of mask painting area minus size of mask layer image (see the text for background-position (en-US))
Computed value	as each of the properties of the shorthand: mask-image (en-US): as specified, but with `<url>` values made absolute mask-mode (en-US): as specified mask-repeat (en-US): Consists of two keywords, one per dimension mask-position (en-US): Consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage. mask-clip (en-US): as specified mask-origin (en-US): as specified mask-size (en-US): as specified, but with relative lengths converted into absolute lengths mask-composite (en-US): as specified
Animation type	as each of the properties of the shorthand: mask-image (en-US): discrete mask-mode (en-US): discrete mask-repeat (en-US): discrete mask-position (en-US): repeatable list of simple list of length, percentage, or calc mask-clip (en-US): discrete mask-origin (en-US): discrete mask-size (en-US): repeatable list of simple list of length, percentage, or calc mask-composite (en-US): discrete
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-layer># (en-US)where 
<mask-layer> = <mask-reference> || (en-US) <position> [ (en-US) / <bg-size> ] (en-US)? (en-US) || (en-US) <repeat-style> || (en-US) <geometry-box> || (en-US) [ (en-US) <geometry-box> | (en-US) no-clip ] (en-US) || (en-US) <compositing-operator> || (en-US) <masking-mode>
where 
<mask-reference> = none | (en-US) <image> | (en-US) <mask-source>
<position> = [ (en-US) [ (en-US) left | (en-US) center | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) center | (en-US) bottom ] (en-US) | (en-US) [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)? (en-US) | (en-US) [ (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage> ] (en-US) && (en-US) [ (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage> ] (en-US) ] (en-US)
<bg-size> = [ (en-US) <length-percentage> | (en-US) auto ] (en-US){ (en-US)1,2} (en-US) | (en-US) cover | (en-US) contain
<repeat-style> = repeat-x | (en-US) repeat-y | (en-US) [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){ (en-US)1,2} (en-US)
<geometry-box> = <shape-box> | (en-US) fill-box | (en-US) stroke-box | (en-US) view-box
<compositing-operator> = add | (en-US) subtract | (en-US) intersect | (en-US) exclude
<masking-mode> = alpha | (en-US) luminance | (en-US) match-source
where 
<image> = <url> | (en-US) <image()> | (en-US) <image-set()> | (en-US) <element()> | (en-US) <paint()> | (en-US) <cross-fade()> | (en-US) <gradient>
<mask-source> = <url>
<length-percentage> = <length> | (en-US) <percentage>
<shape-box> = <box> | (en-US) margin-box
where 
<image()> = image( <image-tags>? (en-US) [ (en-US) <image-src>? (en-US) , <color>? (en-US) ] (en-US)! (en-US) )
<image-set()> = image-set( <image-set-option># (en-US) )
<element()> = element( <id-selector> )
<paint()> = paint( <ident> (en-US), <declaration-value>? (en-US) )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? (en-US) )
<gradient> = <linear-gradient()> | (en-US) <repeating-linear-gradient()> | (en-US) <radial-gradient()> | (en-US) <repeating-radial-gradient()> | (en-US) <conic-gradient()>
<box> = border-box | (en-US) padding-box | (en-US) content-box
where 
<image-tags> = ltr | (en-US) rtl
<image-src> = <url> | (en-US) <string> (en-US)
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hwb()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
<image-set-option> = [ (en-US) <image> | (en-US) <string> (en-US) ] (en-US) [ (en-US) <resolution> (en-US) || (en-US) type(<string> (en-US)) ] (en-US)
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? (en-US) && (en-US) <image>
<cf-final-image> = <image> | (en-US) <color>
<linear-gradient()> = linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ (en-US) <angle> | (en-US) to <side-or-corner> ] (en-US)? (en-US) , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US) , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ (en-US) <ending-shape> || (en-US) <size> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US) , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ (en-US) from <angle> ] (en-US)? (en-US) [ (en-US) at <position> ] (en-US)? (en-US), <angular-color-stop-list> )
where 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hwb()> = hwb( [ (en-US)<hue> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US)<percentage> | (en-US) none] (en-US) [ (en-US) / [ (en-US)<alpha-value> | (en-US) none] (en-US) ] (en-US)? (en-US) )
<side-or-corner> = [ (en-US) left | (en-US) right ] (en-US) || (en-US) [ (en-US) top | (en-US) bottom ] (en-US)
<color-stop-list> = [ (en-US) <linear-color-stop> [ (en-US), <linear-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <linear-color-stop>
<ending-shape> = circle | (en-US) ellipse
<size> = closest-side | (en-US) farthest-side | (en-US) closest-corner | (en-US) farthest-corner | (en-US) <length> | (en-US) <length-percentage>{ (en-US)2} (en-US)
<angular-color-stop-list> = [ (en-US) <angular-color-stop> [ (en-US), <angular-color-hint>] (en-US)? (en-US) ] (en-US)# (en-US) , <angular-color-stop>
where 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>
<linear-color-stop> = <color> <color-stop-length>? (en-US)
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && (en-US) <color-stop-angle>? (en-US)
<angular-color-hint> = <angle-percentage>
where 
<color-stop-length> = <length-percentage>{ (en-US)1,2} (en-US)
<color-stop-angle> = <angle-percentage>{ (en-US)1,2} (en-US)
<angle-percentage> = <angle> | (en-US) <percentage>

예제

.target {
  mask: url(#c1) luminance;
}

.anothertarget {
  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
}

명세

Specification	Status	Comment
CSS Masking Module Level 1 The definition of 'mask' in that specification.	Candidate Recommendation	Extends its usage to HTML elements. Extends its syntax by making it a shorthand for the new `mask-*` properties defined in that specification.
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'mask' in that specification.	Recommendation	Initial definition

브라우저 호환성

BCD tables only load in the browser

mask

구문

값

형식 구문

예제

명세

브라우저 호환성

같이 보기