댓글 검색 목록

[css] CSS 마스킹 사용 방법

페이지 정보

작성자 운영자 작성일 20-09-27 19:28 조회 1,377 댓글 0

clip-path 속성을 사용하여 요소를 자르면 잘린 영역이 보이지 않게 됩니다. 대신 이미지의 일부를 불투명하게 만들거나 다른 효과를 적용하려면 마스킹을 사용해야 합니다. 이 게시물은 CSS에서 mask-image 속성을 사용하는 방법을 설명합니다.이를 통해 마스크 레이어로 사용할 이미지를 지정할 수 있습니다. 이것은 세 가지 옵션을 제공합니다. 이미지 파일을 마스크, SVG 또는 그라디언트로 사용할 수 있습니다.

https://web.dev/css-masking/

브라우저 호환성

대부분의 브라우저는 표준 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() 값을 사용하여 이미지를 전달하십시오. 마스크 이미지에는 투명 또는 반투명 영역이 있어야 합니다.

완전히 투명한 영역은 해당 영역 아래에 있는 이미지의 일부가 보이지 않게 합니다. 그러나 반투명 영역을 사용하면 원본 이미지의 일부가 비쳐 보일 수 있습니다. 아래 글리치의 차이점을 확인할 수 있습니다. 첫 번째 이미지는 마스크가 없는 풍선의 원본 이미지입니다. 두 번째 이미지에는 완전히 투명한 배경에 흰색 별이 있는 마스크가 적용되어 있습니다. 세 번째 이미지에는 그라데이션 투명도가 있는 배경에 흰색 별이 있습니다.

Balloons

이 예제에서는 cover 값과 함께 mask-size 속성도 사용하고 있습니다. 이 속성은 background-size와 동일한 방식으로 작동합니다. 표지 및 포함 키워드를 사용하거나 유효한 길이 단위 또는 백분율을 사용하여 배경에 크기를 지정할 수 있습니다.

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

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);
}

An example of using an SVG 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 접두사가 붙은 항목을 포함하여 관련 마스크 속성으로 대체해야 합니다.

-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;