CSS mask 뿌시기

소정·2023년 12월 27일

CSS mask

멋쟁이사자처럼

목록 보기

11/20

포토샵을 켜지 않아도 CSS에서 사진을 냅다 자를 수 있다던데 ?! !?
그것은 바로 mask 속성을 통해 가능하다 ! mask 한번 뿌셔보자고 ~ !

mask란?

mask 아이템을 부분적으로 표시하거나 완전히 표시하지 않을 수 있는 기능

위의 사진이 포토샵이 아닌 CSS만으로 만들었다면 믿겨지는가 ... ! WOW

이처럼 mask는 웹 페이지의 요소를 특정 부분만 표시하거나 가리는 데 사용된다.
이미지나 요소의 일부분만 보이게 할 수 있고, 투명한 부분을 만들어 다른 요소를 보이게 할 수도 있다.

멋쟁이 mask에 대해 차근차근 알아보자 !

브라우저 호환성

우선 냅다 사용해보기 전에 ! 브라우저 호환성을 확인하고 가자.

23년 12월 기준, PC 브라우저의 호환성은 위와 같다.
IE는 당연히 (?) 안되고, 오페라에선 -webkit- 벤더 프리픽스를 사용해야 한다.

모바일 브라우저에선, 오페라 미니는 아예 사용이 불가능하다.
삼성 인터넷 역시 -webkit- 벤더 프리픽스를 사용해야 한다.

삼성 인터넷 사용 비율이 어느정도 있기 때문에, 크로스 브라우징을 위해 -webkit- 프리픽스를 같이 사용하는 것을 권장한다. 아래와 같이 사용이 가능하다.

.mask {
  -webkit-mask-image: url('mask-image.png');
  mask-image: url('mask-image.png'); /* 표준 속성 */
}

속성

mask-image 마스크에 사용할 이미지 지정
mask-size 마스크 크기 조정
mask-position 마스크 위치 조정
mask-repeat 마스크 이미지의 반복 여부 설정
mask-clip 마스크가 적용될 영역 설정
mask-origin 마스크의 원점 설정
mask-mode 마스크 모드 설정
mask-composite 여러 마스크 조합 방법 설정

mask는 위의 속성들을 단축해서 사용하는 축약 속성이다.
background 축약 속성처럼 mask도 이미지를 주로 이용하기 때문에 동일한 속성이 많이 눈에 띈다.

mask-image

mask-image에는 이미지를 추가할 수도 있고 그라디언트를 활용할 수도 있다. mask 속성이 적용되기 위해선, 이미지에 투명 또는 반투명 영역이 존재해야 한다.

/* 초기값 */
mask-image: none;

/* 이미지로 마스크 적용 */
mask-image: url(star.png);

/* 그라디언트로 마스크 적용 */
mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);

/* 다중 마스크 적용 */
mask-image: image(url(star.png)), linear-gradient(rgba(0, 0, 0, 1), transparent);

아래 mask-image를 통해 마스크가 적용된 결과를 살펴보자.

원본 이미지	마스크 적용할 이미지, 코드	마스크 적용된 결과


	linear-gradient(to top, transparent 5%, black 100%)

활용

그렇다면 ! 이런 mask를 어떻게 활용할 수 있는지 살펴보자.

1. 이미지 마스킹

이미지로 이미지 마스킹

이미지를 특정 이미지의 모양으로 마스킹 할 수 있다.
아래 이미지처럼 이미지를, 특정 이미지(png)로 마스킹 해야 할때 활용한다.

이미지로 텍스트 마스킹

반면, 아래의 이미지는 텍스트를 특정 이미지로 마스킹 한 예이다.
하늘색 배경에 노란색 컬러로 '아이스크림이다'라는 텍스트가 작성되어 있다.
하지만 '아이스크림이다'이라는 텍스트를 알아보기가 정말 어렵다.

이처럼 마크업된 요소(예: 아이스크림이다)를 특정 이미지(예: 아이스크림 6개)로 마스킹 하는 것은 가능하나, 반대로 특정 이미지를 텍스트로 마스킹 하는 것은 어렵다.

.mask {
    mask-image: url(mask.png);
    mask-size: contain;
}

이미지를 텍스트로 마스킹 하기 위해선, 아래처럼 텍스트를 이미지로 만들어서 마스킹 해야한다. 이 과정이 매우 번거롭기 때문에, 이미지로 텍스트를 마스킹할 땐 background-clip 속성이 더 자주 사용된다. background-clip 예시보기

원본 이미지	마스크 적용할 이미지	마스크 적용된 결과

.mask {
  mask-image: url(mask2.png);
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

2. 배경 딤처리

원본 이미지	마스크 적용 코드	마스크 적용된 결과
	linear-gradient(rgba(0, 0, 0, 1) 50%, transparent)

/* 마스크 버전 */
.cover {
  mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, transparent);
}

/* 가상요소 버전 */
.cover {
  position: relative;
}
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, #111);
}