CSS mask-image 속성으로 이미지에 효과 적용

CSS 마스킹을 사용하면 이미지를 마스크 레이어로 사용할 수 있습니다. 즉, 이미지, SVG 또는 그라데이션을 마스크로 사용하여 이미지 편집기 없이도 흥미로운 효과를 만들 수 있습니다.

clip-path 속성을 사용하여 요소를 클리핑하면 클리핑된 영역이 보이지 않게 됩니다. 대신 이미지의 일부를 불투명하게 만들거나 다른 효과를 적용하려면 마스킹을 사용해야 합니다. 이 게시물에서는 CSS에서 mask-image 속성을 사용하는 방법을 설명합니다. 이 속성을 사용하면 마스크 레이어로 사용할 이미지를 지정할 수 있습니다. 이렇게 하면 세 가지 옵션이 표시됩니다. 이미지 파일을 마스크, SVG 또는 그라데이션으로 사용할 수 있습니다.

CSS 마스킹은 새로운 기준으로 제공되지만 mask-image의 대부분의 기능은 접두사 -webkit-mask-image를 사용하여 이전 브라우저 버전에서 사용할 수 있습니다. 다음 예는 최적의 브라우저 지원을 위해 두 속성을 함께 사용하는 방법을 보여줍니다.

이미지로 마스킹

mask-image 속성은 background-image 속성과 유사한 방식으로 작동합니다. url() 값을 사용하여 이미지를 전달합니다. 마스크 이미지에 투명하거나 반투명한 영역이 있어야 합니다.

완전히 투명한 영역은 해당 영역 아래에 있는 이미지 부분을 보이지 않게 합니다. 반투명한 영역을 사용하면 원본 이미지의 일부가 비쳐 보일 수 있습니다. 다음 CodePen에서 차이를 확인할 수 있습니다.

  • 첫 번째 이미지는 마스크가 없는 풍선의 원본 이미지입니다.
  • 두 번째 이미지에는 완전히 투명한 배경에 흰색 별이 있는 마스크가 적용되어 있습니다.
  • 세 번째 이미지에는 그라데이션 투명도가 적용된 배경에 흰색 별이 있습니다.

이 예에서는 값이 covermask-size 속성도 사용합니다. 이 속성은 background-size와 동일한 방식으로 작동합니다. covercontain 키워드를 사용하거나 유효한 길이 단위 또는 비율을 사용하여 배경에 크기를 지정합니다.

작은 이미지를 반복 패턴으로 사용하기 위해 배경 이미지를 반복하는 것처럼 마스크를 반복할 수도 있습니다.

SVG로 마스킹

이미지 파일을 마스크로 사용하는 대신 SVG를 사용할 수 있습니다. 이를 수행하는 방법에는 몇 가지가 있습니다. 첫 번째 방법은 SVG 내에 <mask> 요소를 두고 mask-image 속성에서 해당 요소의 ID를 참조하는 것입니다.

.container img {
  -webkit-mask-image: url(#mask);
  mask-image: url(#mask);
}

이 접근 방식의 장점은 마스크를 이미지뿐만 아니라 모든 HTML 요소에 적용할 수 있다는 것입니다.

이미지를 마스킹하는 가장 일반적인 시나리오의 경우 대신 SVG에 이미지를 포함할 수 있습니다. 첫 번째 접근 방식은 SVG의 이미지를 포함하여 새로 사용 가능한 기준선으로, -webkit 접두사 버전을 지원하는 이전 브라우저에서 지원됩니다.

그라데이션으로 마스킹

CSS 그라데이션을 마스크로 사용하면 이미지나 SVG를 만들지 않고도 마스크 영역을 우아하게 구현할 수 있습니다.

마스크로 사용되는 선형 그라데이션을 사용하면 이미지의 하단이 자막 아래에서 너무 어둡지 않도록 할 수 있습니다.

지원되는 그라데이션 유형을 사용해 원하는 대로 창의력을 발휘할 수 있습니다. 다음 예에서는 원추형 그라데이션을 사용하여 자막 뒤에 조명을 비추는 원형 마스크를 만듭니다.

여러 마스크

배경 이미지와 마찬가지로 여러 마스크 소스를 지정하고 이를 결합하여 원하는 효과를 얻을 수 있습니다. 이는 CSS 그라데이션으로 생성된 패턴을 마스크로 사용하려는 경우에 특히 유용합니다. 일반적으로 이러한 이미지는 여러 배경 이미지를 사용하므로 마스크로 쉽게 변환할 수 있습니다.

예를 들어 이 CSS 그라데이션이 있는 패턴에는 체크보드 패턴이 있습니다. 배경 이미지를 사용하는 코드는 다음과 같습니다.

background-image:
  linear-gradient(45deg, #ccc 25%, transparent 25%),
  linear-gradient(-45deg, #ccc 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #ccc 75%),
  linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;

이 패턴이나 배경 이미지용으로 설계된 다른 패턴을 마스크로 변환하려면 background-* 속성을 접두사가 -webkit인 속성을 포함하여 관련 mask 속성으로 대체해야 합니다.

-webkit-mask-image:
  linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
  linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
  linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;

이미지에 그라데이션 패턴을 적용하면 멋진 효과를 얻을 수 있습니다. 다음 CodePen을 포크하여 다른 변형을 테스트해 보세요.

클리핑과 함께 CSS 마스크는 그래픽 애플리케이션을 사용하지 않고도 이미지 및 기타 HTML 요소에 흥미를 더하는 방법입니다.