100％寬度水平漸變效果的HTML/CSS設計

Question

我試圖達到水平漸變拉伸瀏覽器整個寬度的效果。目前，我的想法是有三個部分，一個在左邊，它的背景顏色用CSS設置爲第一種顏色。這之後是實際的漸變，這是一個圖像設置爲CSS的背景。這將是1000px寬，並充當內容區域，並且在具有magin：auto的頁面中居中。然後在右邊有第三個分段，它基本上與第一個以第二個顏色爲背景相同。通過這種方式，左側和右側部分將伸展，而中央部分（實際上包含漸變）將保持不變。

這個理論被描繪成圖形here。

我的問題是關於兩個方面的問題。如上所述，中心圖像是一個固定的1000像素，但我怎樣才能讓左側和右側區域具有流體寬度（固定高度），但只有左側從瀏覽器的左側到中央div，以及從div右側到瀏覽器右側的權利？

我希望我已經清楚地解釋了這個問題，如果不是請說，我會嘗試提供更多信息。

乾杯

Answer 1

同樣的問題，我介紹了Positioning an images outside of the layout

答案見下搗鼓輸出...

小提琴：http://jsfiddle.net/C2j6G/4/

演示：http://jsfiddle.net/C2j6G/4/embedded/result/

更新小提琴按user908041要求

小提琴：http://jsfiddle.net/C2j6G/5/

演示：http://jsfiddle.net/C2j6G/5/embedded/result/

Answer 2

Here a fiddle for you。希望能幫助到你。

你只需要把你的漸變放在一個容器中。比你可以設置裏面的列。

編輯：

這裏的100％寬編輯：http://jsfiddle.net/2MEhA/2/