HTML/CSS 디자인으로 100 % 너비 가로 그라데이션 효과

Question

브라우저의 전체 너비를 가로 그라데이션으로 늘리는 효과를 얻으려고합니다. 현재, 제 아이디어는 3 개의 세그먼트를 가지는 것입니다. 하나는 좌측에 CSS의 배경색을 첫 번째 색상으로 설정하는 것입니다. 이것은 실제 그래디언트가 뒤 따르게됩니다.이 그래디언트는 CSS로 다시 배경 이미지로 설정됩니다. 1000 픽셀 넓이의 콘텐츠 영역으로 작동하며 magin : auto가있는 페이지의 가운데에 위치합니다. 그 다음 오른쪽에는 3 번째 세그먼트가 있습니다.이 세 번째 세그먼트는 본질적으로 첫 번째 세그먼트와 동일하며 두 번째 색을 배경으로합니다. 이렇게하면 왼쪽 및 오른쪽 세그먼트가 늘어나고 중앙 세그먼트 (실제로는 그라디언트가 들어 있음)는 그대로 유지됩니다.

이 이론은 그래픽으로 묘사됩니다 here.

내 문제는 두 측면에 관한 것입니다. 앞서 언급했듯이 중앙 이미지는 고정 된 1000 픽셀이지만 유체 폭 (고정 높이)을 갖기 위해 왼쪽 및 오른쪽 영역을 가질 수 있지만 왼쪽은 브라우저의 왼쪽에서 중앙 div까지이므로 div의 오른쪽에서 브라우저의 오른쪽으로의 오른쪽?

내가 문제를 명확하게 설명했으면 좋겠다고 말하면 좋겠다. 나는 더 많은 정보를 제공하려고 노력할 것이다.

건배

Answer 1

같은 질문 내가 Positioning an images outside of the layout

에 답을 준 출력을 위해 아래의 바이올린보기 ...

바이올린 : 100 % 폭에 대한 편집은 여기

: http://jsfiddle.net/C2j6G/4/

데모 : http://jsfiddle.net/C2j6G/4/embedded/result/

user908041의 요구 사항에 따라 16,

업데이트 바이올린

바이올린 : http://jsfiddle.net/C2j6G/5/이

데모 : http://jsfiddle.net/C2j6G/5/embedded/result/

Answer 2

Here a fiddle for you. 희망이 도움이됩니다.

그라디언트를 컨테이너에 넣기 만하면됩니다. 안쪽에 열을 설정할 수 있습니다.

편집 : http://jsfiddle.net/2MEhA/2/