속성 mask
속성 mask는 모든 마스킹 속성을 위한 약칭이며 다음을 설정할 수 있습니다:
마스크 이미지, 위치, 크기, 혼합 모드 및 기타 매개변수.
다음 속성들에 대한 약칭 속성입니다:
mask-image,
mask-position,
mask-size,
mask-repeat,
mask-origin,
mask-clip,
mask-mode,
mask-composite.
문법
selector {
mask: [mask-image] [mask-position] / [mask-size]
[mask-repeat] [mask-origin] [mask-clip]
[mask-mode] [mask-composite];
}
값
| 값 | 설명 |
|---|---|
none |
마스킹 비활성화 (기본값) |
url() |
마스크 이미지 경로 (SVG, PNG) |
linear-gradient() |
마스크로 사용할 선형 그라데이션 |
radial-gradient() |
마스크로 사용할 방사형 그라데이션 |
position |
마스크 위치 (top, center, 50% 50% 등) |
size |
마스크 크기 (cover, contain, 100px 50px) |
repeat |
마스크 반복 (no-repeat, repeat-x, space) |
mode |
혼합 모드 (alpha, luminance, match-source) |
composite |
마스크 합성 (add, subtract, intersect, exclude) |
이미지 준비
자연 사진과, 그것을 잘라낼 하트 및 화살표 SVG 이미지가 있습니다:
<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">
:
예제 . 이미지 마스크
사진 위에 하트 모양 마스크를 적용해 봅시다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
background: red;
mask: url("heart.svg") center/300px no-repeat;
}
:
예제 . 마스크 위치
왼쪽 상단 모서리의 하트 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left top/150px no-repeat;
}
:
예제 . 마스크 위치
오른쪽 하단 모서리의 하트 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") right bottom/150px no-repeat;
}
:
예제 . 마스크 위치
왼쪽 가운데의 하트 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center/150px no-repeat;
}
:
예제 . 마스크 위치
가운데의 하트 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/150px no-repeat;
}
:
예제 . 마스크 위치
왼쪽으로 100px, 위로 200px 이동한 하트 마스크:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") 100px 200px /150px no-repeat;
}
:
예제 . 마스크 크기 cover
값 cover는 마스크를 비율을 유지하면서 요소를 완전히 덮도록 확대/축소합니다.
비율이 맞지 않으면 마스크의 가장자리가 잘릴 수 있습니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/cover;
}
:
예제 . 마스크 크기 contain
값 contain는 마스크를 비율을 유지하면서 요소 안에 완전히 들어가도록 확대/축소합니다.
빈 영역이 남을 수 있습니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/contain no-repeat;
}
:
예제 . 마스크 크기
고정 크기는 마스크의 정확한 크기를 설정합니다.
예를 들어 50px 크기의 마스크를 만들어 봅시다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") center/50px no-repeat;
}
:
예제 . 반복 no-repeat
값 no-repeat는 마스크 반복을 비활성화합니다.
마스크는 지정된 위치에 한 번만 표시됩니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") top left / 150px no-repeat;
}
:
예제 . 반복 repeat-x
값 repeat-x는 마스크를 가로축으로만 반복합니다:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask: url("heart.svg") left center / 50px repeat-x;
}
:
예제 . 합성 add
값 add는 여러 마스크를 더합니다 (결과는 모든 마스크의 합집합):
<img id="image" src="image.jpg">
#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는 마스크들이 교차하는 영역만 표시합니다:
<img id="image" src="image.jpg">
#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는 마스크들이 서로 교차하지 않는 영역을 표시합니다:
<img id="image" src="image.jpg">
#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는 첫 번째 마스크에서 두 번째 마스크를 뺍니다.
예를 들어 하나의 하트를 만들고 그 안에서 화살표를 빼 봅시다:
<img id="image" src="image.jpg">
#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 속성:
<img id="image" src="image.jpg">
#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 요소 사용하기:
<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>
#image {
width: 500px;
height: 281px;
background: red;
mask: url(#mask);
}
:
예제 . 그라데이션을 위한 SVG
그라데이션 마스크로서 SVG 요소 사용하기:
<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>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask: url(#star-mask);
}
:
함께 보기
-
속성
mask-position,
요소에 대한 마스크 위치 정의 -
속성
mask-image,
마스크 이미지 설정 -
속성
mask-mode,
마스크가 배경과 어떻게 상호작용하는지 정의 -
속성
mask-size,
마스크 크기 정의 -
속성
mask-repeat,
마스크 반복 정의 -
속성
mask-origin,
마스크 위치 지정 영역 정의 -
속성
mask-clip,
마스크 클리핑 영역 정의 -
속성
mask-composite,
여러 마스크가 어떻게 결합되는지 정의
