不同的BG在不同的方面

Question

我希望在图像右侧和左侧有不同的颜色。现在，CSS看起来像这样：

#header {
    width: 1000px;
    margin: 0 auto;
    height: 199px;
    background: url('img/header.jpg');
}

#header-bg {
    width: 100%;
    background: #161b1c url('img/header-line.gif');
}

虽然#header-bg是右边和左边的实际背景（它也包含一条线，但这是无关紧要的），它会达到宽度的100％。当我更改颜色#161b1c时，我会更改标题的左侧和右侧。我想区分这两者。除了在图像的帮助下，还有其他方法吗？

我附上了该网站的模型：

这是标记：

<div id="header-bg">
    <div id="header"></div>
</div>
<div id="site"></div>

Answer 1

您可以使用:after伪元素和z-index属性执行此操作：

<强> FIDDLE

CSS：

#header {
    width: 1000px;
    margin: 0 auto;
    height: 199px;
    background: url('http://lorempixel.com/output/nature-q-g-1000-239-1.jpg');
    position:relaive;
    z-index:2;
}
#header-bg {
    width: 100%;
    background: #161b1c url('img/header-line.gif');
    position:relative;
    z-index:1;
}
#header-bg:after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    width:50%;
    height:100%;
    background-color: gold;
    z-index:-1;
}