[CSS] 이미지에 그라디언트 효과를 주고싶어! mask-image: linear-gradient

넷플릭스 클론코딩을 하는데 메인 광고 이미지가 그라디언트 효과로 사라지는것을 구현하고 싶었다.

 

 

위의 화면은 내가 html/css만으로 구현한 화면인데, 메인 이미지의 아래 부분을 보면 이미지가 서서히 사라지는것이 보일것이다.

여기 이부분. 보이시죠?

 

구글링을 통해 mask-image 속성중 linear-gradient를 사용하면 된다는것을 알게되었고, 이번에 공부한 내용을 공유하고자 포스팅을 작성한다.

---

mask-image

포토샵을 다뤄봤다, 또는 영상 처리를 공부해보았다. 하는 사람은 '마스크'를 들어보았을것이다.

이미지 합성을 할때 사용한다 생각하면 쉬울건데, 정확한 정의는

" 요소의 마스크를 정의하여 보이는 영역과 숨겨지는 영역을 결정한다. "

라고 보면 된다.

 

: linear-gradient

그중 linear-gradient 속성은 그라디언트 마스크를 만들때 사용한다.

 

✔️기본 형태

mask-image: linear-gradient(direction, color-stop1, color-stop2, ...);

 

• direction:
  • 그라디언트의 방향을 정의한다.
  • 예: to right, to bottom, 45deg (각도) 처럼 하나만 적을수도 있고, to bottom right 처럼 두개를 사용할 수 있다.
• color-stop:
  • 그라디언트의 색상과 위치를 정의한다.
  • 예: rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5) 등
    • 맨 뒤는 투명도이다.

 

---

mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

나는 이렇게 사용했다.

1부터 0까지. 바닥으로 서서히 사라지게 만들었다.

 

 

나중에 이걸로 애니메이션 효과를 주어도 재미있을것 같다.

다른 속성들도 포스팅해야지!

끝!