3

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

我已经尝试了一些事情，但我无法弄清楚这一点。

这是我现在拥有的示例：

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

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

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

4

1 回答 1

2

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

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

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

状态：解决方案是结合使用center center的图像background-position设置两者。width and height100%

于 2012-06-10T23:52:51.137 回答