多个背景，背景色的解决方法

某日要做这样一个菜单栏（涂抹了一下），希望content是1000px居中，根据屏幕大小左边扩展为红右边扩展为蓝

1.运用渐变

个人很喜欢这一种，纯css，缺点是不支持渐变的低版本ie不适用，并且本人没有找到hack方法。

.top{
　background: -webkit-linear-gradient(left,#b60005 0%,#b60005 15%,#083969 15%,#083969); 
  background: -o-linear-gradient(left,#b60005 0%,#b60005 15%,#083969 15%,#083969); 
  background: -moz-linear-gradient(left,#b60005 0%,#b60005 15%,#083969 15%,#083969);
  background: linear-gradient(left,#b60005 0%,#b60005 15%,#083969 15%,#083969);
}

2.background-image

css3提供了多个背景的支持，但麻烦的是想要尽可能加载少量的资源的话，就需要用到repeat，但repeat并没有提供从哪里开始的情况,css会自动repeat到所有背景

幸好还有background-size

.top{
　　background: url(../image/top_bg.png) no-repeat right top #b60005;
    background-size:220px 55px;
}

缺点依然是低版本的ie不兼容

3.加载一张足够长的image

.top{
    background: url(../image/top_bg_ie8.png) no-repeat;
  background-position: left top;
  background-color: #083969;
}

最后采用了此方法，虽然它最笨拙，但能兼容低版本ie，任务需求

4.你也可以通过js判断浏览器版本，采用不同的方法，但因为此项目用到的js比较少，专门建一个js文件有点得不偿失的感觉，换一个项目，我可能更倾向于js判断的方法

5.bTW 也可以考虑div嵌套

如果有错误或者考虑不周的地方，欢迎评论指教，或者您有更好的方法，也请赐教~

多个背景，背景色的解决方法

原文：http://www.cnblogs.com/gongchengshi1803275951/p/4365435.html