선형 그래디언트 오버플로가있는 여러 배경 이미지

Question

내 codepen은 선형 그라디언트가 포함 된 두 번째 다중 배경 이미지가있는 소개 페이지 배경 이미지를 보여줍니다. 문제는 브라우저 크기가 조정되어 이미지가 축소되고 선형 그래디언트가 같은 높이로 유지되는 경우입니다. 그라데이션 높이를 동적으로 변경하여 첫 번째 배경 이미지 높이와 어떻게 일치시킬 수 있습니까?

참고 : 너무 많은 이미지를 잘라 내기 때문에 background-size: cover을 사용하고 싶지 않습니다.

navbar와 배경 이미지 사이의 바디 갭 (색 : # 454545)이 코덱처럼 보입니다. 웹 페이지를 로컬에서 실행할 때 나타나지 않습니다.

Answer 1

내 경험에 비추어 볼 때 CSS는 주변 환경이 변할 때 유연하지 않습니다. 두 가지 솔루션이 내 마음 속에 나타납니다.

1. 동적
2. 사용자의 요구