html - 全 Angular div 中的多种背景颜色和图像

Question

我正在尝试为具有多种背景颜色和图像的网站制作标题。左边是棕褐色渐变和 Logo 图像，右边是渐变为蓝绿色的朝阳/云图像，如下所示。

左侧( Logo )部分应为 230 像素宽，右侧(旭日形)部分应为 770 像素宽，总计 1000 像素，并且应居中。左侧棕褐色渐变应延伸到浏览器的左边缘，蓝绿色应延伸到右边缘。

我尝试用百分比来做:

CSS:

#header {
  height: 105px;
  min-width: 1000px;
}
#header .left {
  width: 31%;
  background: url(../images/header_left_gradient.png) bottom left repeat-x;
  height: 105px;
  float: left;
}
#header .left #logo {
  float: right;
  width: 230px;
}
#header .right {
  width: 69%;
  background: url(../images/header-right.png) bottom left no-repeat #009eb0;
  height: 105px;
  float: left;
}

HTML:

  <div id="header">
    <div class="left">
      <div id="logo">
        <img src="./media/images/logo.png" alt="">
      </div>
    </div>
    <div class="right">
      Text
    </div>
  </div>

这几乎奏效了，但标题并没有在宽浏览器中保持居中。

Fiddle

Answer 1

设置页眉边距和宽度:

#header {
    height: 105px;
    margin: 0 auto;
    min-width: 1000px;
    width: 100%;
}


#header .left {
    background: none repeat scroll 0 0 #FF00FF;
    float: right;
    height: 105px;
    width: 31%;
}


#header .right {
    background: url("../images/header-right.png") no-repeat scroll 0 0 #009EB0;
    float: left;
    height: 105px;
    width: 69%;
}

这对我有用。