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/