html - 如何使 HTML 背景图像的宽度扩展到父 DIV 之外

Question

我有一个标题图片，我想将其水平放置，横跨网站顶部。宽度需要与浏览器窗口相同。

这与 StackOverflow 顶部的黑色条完全相同。

我的包装 DIV 具有固定宽度，因此我的图像仅针对 DIV 的宽度出现。我怎样才能让它成为浏览器窗口的全宽？

Answer 1

简短的回答是你不能。背景图像将始终包含在其父元素中。您可以尝试做的是不使用图像作为父元素的背景，而是将其放入它自己的元素中并将该元素带出容器。

例如:

<div class="container">
    <div class="headerImage">
        <ul class="navigation">
            <li><a href="">Link One</a></li>
            <li><a href="">Link Two</a></li>
        </ul>
    </div>
    <div class="otherContent"></div>
</div>

然后在你的 CSS 中:

.container {
    position: static; // This allows the image to break outside of it's container.
    margin: 0 auto;
    width: 960px;
}

.headerImage {
    background: url(yourImage.png) center top no-repeat transparent;
    display: block;
    position: absolute; // This breaks it out of the normal document flow.
    top: 0; left: 0;
    width: 100%; // This will expand to fill the width of the window.
    height: 65px; // Or whatever height you want.
    z-index: 10; // Play with this number for layering.
}

祝你的元素好运。