IMAGE
-
[CSS] 이미지 위에 gradient 넣기 + 틈 없애기웹 개발/소소한 팁, 버그 해결 2024. 11. 22. 20:57
다음 페이지로의 자연스러운 전환이나, 이미지 스크롤러의 양 끝에 자연스럽게 이미지가 사라지는 효과를 위해 background를 gradient로 설정한 div 태그 등을 넣기도 한다. 이때, graident 컴포넌트가 생기기는 하는데 이미지 뒤에 있는 경우에는 z 값 조정 대신 position 속성을 absolute로 설정하면 해결된다.아래는 예시 코드. (나는 tailwind css 사용 중이라 아래처럼 입력했다).gradient-edge { @apply absolute inset-0 left-0 right-0 top-0 bottom-0; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.00) 25..