我非常熟悉代码中需要“水平条带”的网站 - 即使它们的内容在960px内固定，它们的背景也会“向左和向右延伸”。
我知道怎么做，如果他们有一种颜色，或者我可以用作背景的单个图像。
最近，客户需要其中一个频段，有几个特殊要求：
我最初想过用所有可能的双色组合创建背景图像，但系统基本上应该允许任何两种颜色。因此，必须在html / css中指定颜色而不是图像。
我已经尝试了一段时间，到目前为止，这是我的最大努力：
我不喜欢这个设置：
height: 100%添加到容器内的所有div。我宁愿只需在乐队上指明。这个问题有更优雅的解决方案吗？
答案 0 :(得分：3)
您应该尝试使用CSS3渐变，这样可以避免您为定制目的而定义的许多不必要的元素（这对于可持续性而言非常糟糕，并且在现代Web开发方法中非常不鼓励）
基本上你需要一个从0到50％宽度的渐变蓝色和从50％到100％的红色应用于100％宽度的元素，类似
background-image: linear-gradient(left, rgb(0,0,255) 50%, rgb(255,0,0) 0%);
这是一个小提琴示例：http://jsfiddle.net/657X4/2/
有关渐变支持的更多信息，请查看http://caniuse.com/css-gradients
IE<10不支持渐变，但您也可以考虑为这些浏览器提供不同的样式作为优雅 - 不可编程的降级（例如宽背景gif，50％红色和50％蓝色位置top center并沿y轴重复）
答案 1 :(得分：1)
试试这个：
浮动左右div。使用容器中的overflow:hidden清除它们，然后设置padding-bottom＆amp;和乐队的负margin-bottom。使用此方法，您无需设置内容或band div的高度。没有高度=更好的标记。