我非常熟悉代码中需要“水平条带”的网站 - 即使它们的内容在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的高度。没有高度=更好的标记。