添加背景“条”以使用颜色扩展标题图像。或将图像放在 div 条上

Question

我基本上为我的网站制作了一个标题图片，并且它的侧面有黑色。我想扩展标题，使其适用于带有黑色“条”的用户 Web 浏览器的宽度，就好像标题扩展了他们的整个浏览器一样。

我已经尝试了一些东西，但我无法弄清楚。

这是我现在拥有的示例：

#header {
    background: url('img/header.png') no-repeat top center;
    height: 131px;
    }

#headerbg {
    height: 131px;
    width:4000px;
    background-color:#000;
}

在 html 中，我只在 div 中和在 html 中彼此之间都有。

Answer 1

这是一个jsFiddle，它向您展示了如何将两个 div 分层并使用background-size 属性来扩展图像，使其与背景颜色的宽度相同。更新：上面的新 jsFiddle 被替换为包含更好的方法来处理这种类型的外观。

编辑：这是一个不同的jsFiddle，它将图像放置在内部并居中，允许父容器中多余的背景颜色显示出来。

编辑 2： 使用上面的编辑小提琴，您可以应用 CSS3/IE 渐变效果，如 jsFiddle 所示。

状态：解决方案是将center center 用于background-position，同时将width and height 设置为100% 以用于使用的图像。