html - css - 双色，灵活，水平背景 "band"

Question

我非常熟悉在代码中需要“水平带”的网站 - 即使他们的内容固定在 960 像素以内，他们的背景也会向左和向右“延伸”。

我知道如何做这些，如果它们只有一种颜色，或者我可以用作背景的一张图片。

最近一位客户需要这样的乐队之一，有几个特殊要求:

• 乐队必须是右边一种颜色和左边一种颜色
• 颜色是可编程的；它们根据内容类型而变化

我最初考虑使用所有可能的双色组合创建背景图像，但系统应该基本上允许任何双色。因此必须在 html/css 中指定颜色而不是图像。

我已经尝试了一段时间，到目前为止这是我最大的努力:

http://jsfiddle.net/WENu3/

我不喜欢这个设置的几个地方:

• 容器必须有一个固定的高度。否则左带和右带崩溃。我宁愿让整个事物的高度由文本内容定义。
• 我必须将 height: 100% 添加到容器内的所有 div。我宁愿只需要在乐队上指定。
• 我觉得我需要太多的 div。特别是，我不确定是否需要“内容”div。
• 底部有 1 个像素的差异(Chrome 和 Firefox)。我不知道为什么会这样，也不知道如何解决。

这个问题有没有更优雅的解决方案？

Answer 1

您应该尝试使用 CSS3 渐变，这将使您免于定义仅用于样式目的的大量不必要的元素(这对于可维护性非常不利，并且在现代 Web 开发方法中强烈反对)

基本上你需要一个从 0% 到 50% 宽度的渐变蓝色和从 50% 到 100% 的红色渐变应用于 100% 宽度的元素，比如

background-image: linear-gradient(left, rgb(0,0,255) 50%, rgb(255,0,0) 0%);

这是一个 fiddle 示例:http://jsfiddle.net/657X4/2/

有关渐变支持的更多信息，请查看 http://caniuse.com/css-gradients

IE<10 不支持渐变，但您也可以考虑为这些浏览器提供不同的样式，作为优雅的不可编程的降级(例如，宽背景 gif，位置 top center 的 50% 红色和 50% 蓝色并重复y 轴)