css - 双色,灵活,水平背景“乐队”

时间:2012-01-17 10:48:35

标签: html css

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

我知道怎么做,如果他们有一种颜色,或者我可以用作背景的单个图像。

最近,客户需要其中一个频段,有几个特殊要求:

  • 乐队的右边是一种颜色,左边是一种颜色
  • 颜色可编程;它们会根据内容类型而改变

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

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

http://jsfiddle.net/WENu3/

我不喜欢这个设置:

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

这个问题有更优雅的解决方案吗?

2 个答案:

答案 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)

试试这个:

http://jsfiddle.net/WENu3/23/

浮动左右div。使用容器中的overflow:hidden清除它们,然后设置padding-bottom&amp;和乐队的负margin-bottom。使用此方法,您无需设置内容或band div的高度。没有高度=更好的标记。