Question

我有一个header-Container div，它延伸了浏览器宽度的100％，就像在StackOverflow上一样。在这个div中是具有固定宽度的实际header，其以页面为中心。

我想要的是将特定的背景颜色仅应用于标题的左侧，并将不同的颜色应用于标题的右侧。我基本上试图在header-Container div上创建一个分割背景颜色方案。

这是一个JSFiddle，我现在在哪里http://jsfiddle.net/1orddfn7/

HTML：

<div id="header-Container">
    <div id="header">
    </div>
</div>

CSS：

#header-Container { background-color: #CCC; position: relative; height: 190px;}
#header { background-color: red; width: 400px; height: 190px; margin-right: auto; margin-left: auto; }

我无法应用两种背景颜色并将其拆分为标题容器div上的50％标记（如果可能，我希望最大限度地提高浏览器兼容性）。所以我想我需要创建两个额外的div，例如header-bg-left和header-bg-right，并分别在主中心header div左右浮动它们。但后来我不明白如何让它们将剩余的空间填充到浏览器窗口的边缘，但是停在header div的边缘。有更好的方法吗？

Answer 1

一种方法是使用:after和:before创建具有所需颜色的元素

#header-Container:before,
#header-Container:after{
    content:'';
    position:absolute;
    z-index:-1;
    width:50%;
    top:0;
    bottom:0;
}
#header-Container:before{left:0;background-color:yellow;}
#header-Container:after{right:0;background-color:green;}

http://jsfiddle.net/1orddfn7/2/

演示

另一种方法是使用两种颜色的渐变背景。

#header-Container { position: relative; height: 190px;
    background: -moz-linear-gradient(left, #eaf700 0%, #eaf700 50%, #0fe500 50%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eaf700), color-stop(50%,#eaf700), color-stop(50%,#0fe500));
    background: -webkit-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: -o-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: -ms-linear-gradient(left, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    background: linear-gradient(to right, #eaf700 0%,#eaf700 50%,#0fe500 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf700', endColorstr='#0fe500',GradientType=1 );
}

http://jsfiddle.net/1orddfn7/3/

演示

（来自http://www.colorzilla.com/gradient-editor/的渐变css ）

如何实现左右背景分割，让中间div可见？

1 个答案: