mask

Baseline 2023

Newly 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 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:
계산 값as 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:
Creates stacking contextyes

구문

css
/* 키워드 값 */
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>* )

예제

css
.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

같이 보기