시각적 질감 콘텐츠

웹 기능: 마스크

개요

요소에 사실적인 풍화 또는 질감 패턴 (예: 그런지, 노이즈, 종이 질감)을 적용하려면 반복되는 질감 이미지와 함께 CSS 마스킹 (mask-image)을 사용합니다. 이렇게 하면 단순히 질감을 위에 오버레이하는 것이 아니라 콘텐츠의 일부를 반투명하게 만들어 콘텐츠 자체에 질감이 있는 것처럼 보이게 할 수 있습니다. 이렇게 하면 더 사실적인 물리적 재질 모양이 만들어집니다.

구현

질감 패턴을 적용하려면 다음 안내를 따르세요.

이는 사실적인 질감을 표현하는 가장 일반적인 방법입니다.

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

방법 2: 기하학적 패턴에 CSS 그라데이션 사용

CSS 그라데이션을 사용하여 패턴을 생성할 수 있습니다. 이것은 자체 포함되어 있으며 외부 이미지 파일이 필요하지 않습니다.

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

알파 마스킹 모드와 휘도 마스킹 모드 비교

기본적으로 CSS 마스크는 mask-mode: match-source를 사용합니다. 즉, 브라우저는 제공하는 소스 유형에 따라 마스크의 알파 채널 (투명도) 또는 휘도 (밝기)를 사용할지 자동으로 결정합니다.

마스크 소스 유형 기본 마스크 모드 마스킹 동작
인라인 SVG <mask> 요소 luminance 불투명도는 색상의 밝기에 따라 결정됩니다. 흰색은 콘텐츠를 표시하고, 검은색은 콘텐츠를 숨기며, 회색은 반투명 효과를 만듭니다.
직접 이미지 파일 (예: PNG, SVG 파일) alpha 불투명도는 투명도에 따라 결정됩니다. 불투명 부분은 콘텐츠를 표시하고 투명 부분은 콘텐츠를 숨깁니다.
CSS 그라데이션 alpha 불투명도는 투명도에 따라 결정됩니다. 불투명 색상 (예: black)은 콘텐츠를 표시하고 투명 색상은 콘텐츠를 숨깁니다.

대체 전략

브라우저가 mask-image 또는 접두사가 붙은 버전을 지원하지 않는 경우:

  • 요소가 질감 없이 표시됩니다 (깔끔하고 단색 채우기).
  • 질감이 없어도 콘텐츠를 읽을 수 있어야 합니다 (점진적 개선).
  • 배경 이미지나 오버레이를 대체로 사용하여 질감을 시뮬레이션할 수 있지만 콘텐츠 자체의 투명도에는 영향을 미치지 않습니다.
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}