添加背景“条纹”以扩展带有颜色的页眉图像，或将图像放在div条纹上方。

Question

添加背景“条纹”以扩展带有颜色的页眉图像，或将图像放在div条纹上方。

3

我基本上为我的网站制作了一个页眉图像，其两侧有黑色。我想扩展标题，使其覆盖用户网络浏览器的整个宽度，带有黑色“条纹”，就好像标题延伸到他们的整个浏览器一样。

我尝试了几种方法，但我无法解决这个问题。

以下是我现在拥有的示例：

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

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

在HTML中，我只是将它们放在div中，并相互嵌套。

- king

我不是很理解你的问题。请尝试设置一个 jsFiddle。 - kapa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- arttronics · Accepted Answer

这里有一个jsFiddle，展示了如何将两个div叠加并使用background-size属性扩展图像，使其与背景颜色的宽度相同。更新：上面的新jsFiddle被替换为更好的方法。

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

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

状态：解决方案是使用center center作为background-position，并将使用的图像的width和height都设置为100%。