콘텐츠에 대한 부모 div 높이 설정, 부모 여백 바깥쪽에 콘텐츠 배치

Question

모서리에 자신을 설계하기 전에 약간의 도움이 필요합니다!

rough wireframe

그래서 내가 헤더 (고정)과 바닥 글 (고정되지 않음) 및 전체 대형을 가지고 : 난 내가 통해 당신을 얘기하자있는 달성하기 위해 노력하고있어의 거친 와이어 프레임을 첨부했습니다 페이지 이미지. 이 상자는 단색이고 중간에있는 컨테이너는이 컨테이너의 여백의 약 5 % 위아래에 위치합니다. 이 컨테이너 안에는 텍스트와 이미지가 있으며, 그 중 몇 가지는 flexbox를 통해 수직 슬랙을 제어합니다. 이 아래에는 슬라이드 쇼가 될 수있는 또 다른 전체 페이지 이미지가 있습니다. 나머지 페이지는 아직 결정되지 않았습니다.

저는 센터 섹션, 절대 위치 지정 등에서 배경 이미지 여백을 가지고 놀았습니다. 나는 이것에 대해 가장 좋은 방법을 모를 것입니다. 꼭대기 부분을 오버레이하는 것은 쉽지만, 중앙 부분의 가장자리가 아닌 단색의 가장자리에 맞춰 다음 섹션을 가져 오는 것은 어렵습니다.

내 클라이언트는 다른 곳에서 비슷한 것을 보았지만 Url이 아닌 시각적 요소 만 전송 했으므로 기본 코드를 살펴볼 수 있습니다.

어떤 영리한 아이디어라도 높이 평가할 수 있습니다!

감사

Answer 1

이 내가 시도 할 것입니다 ... 컨텐츠의 높이, 배경 이미지의없는 높이와 중간 컨테이너의

생각합니다. 중간 컨테이너에 일치하는 배경색을 설정하여 세 가지 컨테이너 모두에서 배경색이 동일하도록하십시오. 그런 다음 가운데 컨테이너에 배경 이미지를 제공하고 이미지의 크기를 제한하고 중앙에 배치하면 일치하는 색상이 이미지가 덮지 않는 부분을 표시합니다.