CSS 마스킹

CSS 마스킹을 사용하면 요소의 일부를 부분적으로 또는 완전히 숨기기 위해 요소 위에 배치할 마스크 레이어를 만듭니다.

CSS 마스크 이미지 속성

CSS mask-image속성은 마스크 레이어 이미지를 지정합니다.

마스크 레이어 이미지는 PNG 이미지, SVG 이미지, CSS 그라디언트 또는 SVG <mask> 요소 일 수 있습니다.

브라우저 지원

참고: 대부분의 브라우저는 CSS 마스킹을 부분적으로만 지원합니다. 대부분의 브라우저에서 표준 속성 외에 -webkit- 접두사를 사용해야 합니다.

아래 표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다. -webkit- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.

Property
mask-image	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

이미지를 마스크 레이어로 사용

PNG 또는 SVG 이미지를 마스크 레이어로 사용하려면 url() 값을 사용하여 마스크 레이어 이미지를 전달합니다.

마스크 이미지에는 투명하거나 반투명한 영역이 있어야 합니다. 검은색은 완전히 투명함을 나타냅니다.

다음은 사용할 마스크 이미지(PNG 이미지)입니다.

다음은 이탈리아 Cinque Terre의 이미지입니다.

이제 이탈리아 Cinque Terre의 이미지에 대한 마스크 레이어로 마스크 이미지(위의 PNG 이미지)를 적용합니다.

예시

소스 코드는 다음과 같습니다.

.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

예시 설명

mask-image속성은 요소의 마스크 레이어로 사용할 이미지를 지정합니다 .

mask-repeat속성은 마스크 이미지가 반복되는지 여부 또는 방법을 지정합니다 . 값은 마스크 이미지가 반복되지 않음을 나타냅니다 ( no-repeat 마스크 이미지는 한 번만 표시됨).

또 다른 예

속성 을 생략하면 mask-repeat마스크 이미지가 이탈리아 Cinque Terre의 이미지 전체에 반복됩니다.

예시

소스 코드는 다음과 같습니다.

.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
}

그라디언트를 마스크 레이어로 사용

CSS 선형 및 방사형 그래디언트도 마스크 이미지로 사용할 수 있습니다.

선형 그라디언트 예제

여기에서는 이미지의 마스크 레이어로 선형 그라디언트를 사용합니다. 이 선형 그라데이션은 위쪽(검정색)에서 아래쪽(투명)으로 이동합니다.

예시

선형 그라디언트를 마스크 레이어로 사용:

.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black, transparent);
}

여기에서는 텍스트 마스킹과 함께 선형 그라디언트를 이미지의 마스크 레이어로 사용합니다.

친퀘테레(Cinque Terre)는 이탈리아 북서부의 리구리아(Liguria)에 있는 해안 지역입니다. La Spezia 지방의 서쪽에 있으며 Monterosso al Mare, Vernazza, Corniglia, Manarola 및 Riomaggiore의 5개 마을로 구성됩니다.

예시

마스크 레이어로 텍스트 마스킹과 함께 선형 그라디언트 사용:

.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(img_5terre.jpg) no-repeat;
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient (black, transparent);
}

방사형 그라데이션 예

여기에서는 방사형 그래디언트(원 모양)를 이미지의 마스크 레이어로 사용합니다.

예시

방사형 그래디언트를 마스크 레이어(원)로 사용:

.mask2 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

여기에서는 방사형 그래디언트(타원 모양)를 이미지의 마스크 레이어로 사용합니다.

예시

다른 방사형 그라디언트를 마스크 레이어(타원)로 사용:

.mask3 {
-webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5));
}

SVG를 마스크 레이어로 사용

SVG <mask>요소는 SVG 그래픽 내부에서 마스킹 효과를 만드는 데 사용할 수 있습니다.

여기에서 SVG <mask>요소를 사용하여 이미지에 대해 다른 마스크 레이어를 만듭니다.

예시

SVG 마스크 레이어(삼각형으로 형성):

예시

SVG 마스크 레이어(별 모양):

예시

SVG 마스크 레이어(원으로 형성됨):

CSS 마스킹 속성

다음 표에는 모든 CSS 마스킹 속성이 나열되어 있습니다.

Property	Description
mask-image	Specifies an image to be used as a mask layer for an element
mask-mode	Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask
mask-origin	Specifies the origin position (the mask position area) of a mask layer image
mask-position	Sets the starting position of a mask layer image (relative to the mask position area)
mask-repeat	Specifies how the mask layer image is repeated
mask-size	Specifies the size of a mask layer image

❮ 이전의 다음 ❯

CSS 튜토리얼

CSS 고급

CSS 반응형

CSS 그리드

CSS SASS

CSS 예제

CSS 참조