css - 添加背景 "bars"以使用颜色扩展标题图像。或者将图像放在 div 条上

Question

我基本上为我的网站制作了一个标题图片，它的两边都是黑色的。我想扩展 header ，使其与用户 Web 浏览器的宽度一致，带有黑色“条”，就好像 header 扩展到整个浏览器一样。

我已经尝试了一些东西，但我想不通。

这是我现在拥有的示例:

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

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

而在 html 中，我只是在 html 中同时拥有 div 和彼此内部。

Answer 1

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

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

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

状态:解决方案是使用 center center 作为 background-position 并同时设置 width 和 height 为所使用的图像设置 100%。