CSS 마스킹을 사용하면 이미지를 마스크 레이어로 사용할 수 있습니다. 즉, 이미지, SVG 또는 그래디언트를 마스크로 사용하여 이미지 편집기 없이도 흥미로운 효과를 만들 수 있습니다.
clip-path 속성을 사용하여 요소를 자르면 잘린 영역이 표시되지 않습니다.
이미지의 일부를 불투명하게 만들거나 다른 효과를 적용하려면 마스킹을 사용해야 합니다.
이 게시물에서는 CSS에서 mask-image 속성을 사용하여 마스크 레이어로 사용할 이미지를 지정하는 방법을 설명합니다.
그러면 세 가지 옵션이 제공됩니다. 이미지 파일을 마스크, SVG 또는 그라데이션으로 사용할 수 있습니다.
브라우저 호환성
대부분의 브라우저는 표준 CSS 마스킹 속성을 부분적으로만 지원합니다.
최상의 브라우저 호환성을 달성하려면 표준 속성 외에 -webkit- 접두사를 사용해야 합니다.
전체 브라우저 지원 정보는 CSS 마스크를 사용할 수 있나요?를 참고하세요.
접두사 속성을 사용한 브라우저 지원도 좋지만 마스킹을 사용하여 이미지 위에 텍스트를 표시할 때는 마스킹을 사용할 수 없을 때 발생하는 상황에 유의하세요.
마스킹된 버전을 추가하기 전에 기능 쿼리를 사용하여 mask-image 또는 -webkit-mask-image 지원을 감지하고 읽을 수 있는 대체를 제공하는 것이 좋습니다.
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
이미지로 마스킹
mask-image 속성은 background-image 속성과 비슷한 방식으로 작동합니다.
url() 값을 사용하여 이미지를 전달합니다.
마스크 이미지에는 투명 또는 반투명 영역이 있어야 합니다.
완전히 투명한 영역은 ��당 영역 아래의 이미지 부분이 보이지 않게 됩니다. 하지만 반투명한 영역을 사용하면 원본 이미지 중 일부가 보입니다. 아래의 글리치에서 차이점을 확인할 수 있습니다. 첫 번째 이미지는 마스크가 없는 풍선의 원본 이미지입니다. 두 번째 이미지에는 완전히 투명한 배경에 흰색 별이 있는 마스크가 적용되어 있습니다. 세 번째 이미지는 그라데이션 투명도의 배경에 흰색 별이 있습니다.
이 예시에서는 값이 cover인 mask-size 속성도 사용합니다.
이 속성은 background-size와 동일한 방식으로 작동합니다.
키워드 cover 및 contain를 사용하거나 유효한 길이 단위 또는 백분율을 사용하여 배경에 크기를 지정할 수 있습니다.
작은 이미지를 반복 패턴으로 사용하기 위해 배경 이미지를 반복할 때처럼 마스크를 반복할 수도 있습니다.
SVG로 마스킹
이미지 파일을 마스크로 사용하는 대신 SVG를 사용할 수 있습니다.
여기에는 두 가지 방법이 있습니다.
첫 번째는 SVG 내에 <mask> 요소를 두고 mask-image 속성에서 이 요소의 ID를 참조하는 것입니다.
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
이 접근 방식의 장점은 마스크를 이미지뿐만 아니라 모든 HTML 요소에 적용할 수 있다는 것입니다. 아쉽게도 Firefox는 이 방법을 지원하는 유일한 브라우저입니다.
모든 것이 손실되는 것은 아니지만 이미지를 마스킹하는 가장 일반적인 시나리오와 마찬가지로 SVG에 이미지를 ��함할 수 있습니다.
그라데이션을 사용한 마스킹
CSS 그래디언트를 마스크로 사용하면 이미지나 SVG를 만드는 번거로움 없이 마스킹 영역을 우아한 방법으로 만들 수 있습니다.
예를 들어 마스크로 사용되는 간단한 선형 그래디언트는 이미지의 하단 부분이 캡션 아래 너무 어둡지 않도록 할 수 있습니다.
지원되는 그라데이션 유형을 사용하여 원하는 대로 창의력을 발휘할 수 있습니다. 다음 예에서는 방사형 그라데이션을 사용하여 캡션 뒤를 비추는 원형 마스크를 만듭니다.
여러 마스크 사용
배경 이미지와 마찬가지로 여러 마스크 소스를 지정하고 결합하여 원하는 효과를 얻을 수 있습니다. 이 방법은 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;
이미지에 그라데이션 패턴을 적용하여 멋진 효과를 만들 수 있습니다. Glitch를 리믹스하고 다른 버전을 테스트해 보세요.
클리핑과 함께 CSS 마스크를 사용하면 그래픽 애플리케이션을 사용하지 않고도 이미지 및 기타 HTML 요소에 관심을 추가할 수 있습니다.
사진: 훌리오 리오날도(Unsplash).