속성 mask

속성 mask는 모든 마스킹 속성을 위한 약칭이며 다음을 설정할 수 있습니다: 마스크 이미지, 위치, 크기, 혼합 모드 및 기타 매개변수.

다음 속성들에 대한 약칭 속성입니다: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

문법

cssselector {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

값

이미지 준비

자연 사진과, 그것을 잘라낼 하트 및 화살표 SVG 이미지가 있습니다:

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

예제 . 이미지 마스크

사진 위에 하트 모양 마스크를 적용해 봅시다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url("heart.svg") center/300px no-repeat;
}

Результат:

예제 . 마스크 위치

왼쪽 상단 모서리의 하트 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left top/150px no-repeat;
}

Результат:

예제 . 마스크 위치

오른쪽 하단 모서리의 하트 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") right bottom/150px no-repeat;
}

Результат:

예제 . 마스크 위치

왼쪽 가운데의 하트 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center/150px no-repeat;
}

Результат:

예제 . 마스크 위치

가운데의 하트 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
}

Результат:

예제 . 마스크 위치

왼쪽으로 100px, 위로 200px 이동한 하트 마스크:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") 100px 200px /150px no-repeat;
}

Результат:

예제 . 마스크 크기 cover

값 cover는 마스크를 비율을 유지하면서 요소를 완전히 덮도록 확대/축소합니다. 비율이 맞지 않으면 마스크의 가장자리가 잘릴 수 있습니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

예제 . 마스크 크기 contain

값 contain는 마스크를 비율을 유지하면서 요소 안에 완전히 들어가도록 확대/축소합니다. 빈 영역이 남을 수 있습니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/contain no-repeat;
}

Результат:

예제 . 마스크 크기

고정 크기는 마스크의 정확한 크기를 설정합니다. 예를 들어 50px 크기의 마스크를 만들어 봅시다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/50px no-repeat;
}

Результат:

예제 . 반복 no-repeat

값 no-repeat는 마스크 반복을 비활성화합니다. 마스크는 지정된 위치에 한 번만 표시됩니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") top left / 150px no-repeat;
}

Результат:

예제 . 반복 repeat-x

값 repeat-x는 마스크를 가로축으로만 반복합니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center / 50px repeat-x;
}

Результат:

예제 . 합성 add

값 add는 여러 마스크를 더합니다 (결과는 모든 마스크의 합집합):

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 200px 30px / 150px no-repeat;
  mask-composite: add;
}

Результат:

예제 . 합성 intersect

값 intersect는 마스크들이 교차하는 영역만 표시합니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: intersect;
}

Результат:

예제 . 합성 exclude

값 exclude는 마스크들이 서로 교차하지 않는 영역을 표시합니다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: exclude;
}

Результат:

예제 . 합성 subtract

값 subtract는 첫 번째 마스크에서 두 번째 마스크를 뺍니다. 예를 들어 하나의 하트를 만들고 그 안에서 화살표를 빼 봅시다:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 250px no-repeat,
    url("arrow.svg") 170px 80px / 120px no-repeat;
    
    
  mask-composite: subtract;
}

Результат:

예제 . 확장된 mask 표기

개별 구성 요소로 작성된 mask 속성:

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-origin: content-box;
  mask-clip: content-box;
  mask-mode: alpha;
  mask-composite: add;
}

Результат:

예제 . 이미지를 위한 SVG

이미지 마스크로서 SVG 요소 사용하기:

html<img id="image" src="image.jpg">
<svg width="0" height="0">
  <mask id="mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url(#mask);
}

Результат:

예제 . 그라데이션을 위한 SVG

그라데이션 마스크로서 SVG 요소 사용하기:

html<div id="elem"></div>
<svg width="0" height="0">
  <mask id="star-mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

함께 보기