이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

mask CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.

maskmask-border를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 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 element and all graphics elements
상속no
Percentagesas each of the properties of the shorthand:
Mediavisual
Computed valueas each of the properties of the shorthand:
  • mask-image: as specified, but with <url> values made absolute
  • mask-mode: as specified
  • mask-repeat: Consists of two keywords, one per dimension
  • mask-position: 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: as specified
  • mask-origin: as specified
  • mask-size: as specified, but with relative lengths converted into absolute lengths
  • mask-composite: as specified
Animation typeas each of the properties of the shorthand:
Canonical orderper grammar
Creates stacking contextyes

구문

/* 키워드 값 */
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-layer>#

where
<mask-layer> = <mask-reference> || <position> [ / <bg-size> ]? || <repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator> || <masking-mode>

where
<mask-reference> = none | <image> | <mask-source>
<position> = [ [ 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> | 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

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<mask-source> = <url>
<length-percentage> = <length> | <percentage>
<shape-box> = <box> | margin-box

where
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
<box> = border-box | padding-box | content-box

where
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )

where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<linear-color-stop> = <color> && <color-stop-length>
<linear-color-hint> = <length-percentage>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>

where
<color-stop-length> = <length-percentage>{1,2}
<color-stop-angle> = <angle-percentage>{1,2}
<angle-percentage> = <angle> | <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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
maskChrome Partial support 1
Notes
Partial support 1
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Full support 12Firefox Full support 2
Notes
Full support 2
Notes
Notes From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
IE No support NoOpera Partial support Partial
Notes
Partial support Partial
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari Partial support 4
Notes
Partial support 4
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
WebView Android Full support 2
Full support 2
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Partial support 18
Notes
Partial support 18
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Edge Mobile Full support YesFirefox Android Full support 4
Notes
Full support 4
Notes
Notes From Firefox 10, the default color space when handling masks is sRGB. Previously, the default and only supported color space was linear RGB. This changes the appearance of mask effects, but brings Firefox into compliance with the second edition of the SVG 1.1 specification.
Opera Android Partial support Partial
Notes
Partial support Partial
Notes
Notes While the property is recognized, values applied to it don't have any effect.
Full support Yes
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes The prefixed property can be used with SVG and HTML with a slightly different syntax, which allows setting the non-standard -webkit-mask-attachment property.
Safari iOS Full support 3.2
Prefixed
Full support 3.2
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
Applies to HTML elementsChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge ? Firefox Full support 3.5IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Shorthand for mask-* propertiesChrome Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge ? Firefox Full support 53IE No support NoOpera Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile ? Firefox Android Full support 53Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Partial support  
Partial support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: alattalatta, mdnwebdocs-bot, hoony
최종 변경자: alattalatta,