html - 居中，分层和定位。如何使前景从背景边缘突然爆发？

我有以下CSS，我正在尝试做的是使背景小于前景，因此前景看起来像是从边缘爆裂。

header.png和center.png的宽度比背景大，但它们本身必须是背景图像，因为它们的文字将层叠在顶部。

现在，我尝试使用Z-index，但是由于某些原因，前景图像仍然保持向右移动42px，然后我通过左方放置前景图像：-42px;而位于前景div内的文本将不会定位在我想要的位置。因此，以下CSS已重设为我的默认设置。

#wrapper {  /* Used for centering the webpage */
    width: 1044px;
    display: block;
    margin: 0 auto;
}

#container { /* Used for background image */
    width: 960px;
    display: block;
    margin: 0 auto;
    overflow: auto;
    backgorund: url(images/bg.png)
}

/* Foreground Images */

h1 {
    width: 1044px;
    height: 196px;
    display: block;
    margin: 0 auto;
    background: url(images/header.png) no-repeat center;
}

#center_piece {
    width: 1044px;
    height: 492px;
    display: block;
    margin: 0 auto;
    background: url(images/center.png) no-repeat center;
}

最佳答案

一种可能的解决方案是将每个“爆裂片段”包装在相对定位的元素中，然后将h1和#center_piece绝对放置在其中。

演示：http://jsfiddle.net/KZeuN/

HTML：

<div id="wrapper">
    <div id="container">
        <div id="h1_origin">
            <h1>H1</h1>
        </div>
        <div id="center_piece_origin">
            <div id="center_piece">
                Center Piece
            </div>
        </div>
    </div>
</div>

CSS：

#wrapper {  /* Used for centering the webpage */
    width: 1044px;
    display: block;
    margin: 0 auto;
}

#container { /* Used for background image */
    width: 960px;
    display: block;
    margin: 0 auto;
    /* remove overflow: auto; */
    background: url(images/bg.png)


}

/* Foreground Images */

h1 {
    width: 1044px;
    height: 196px;
    display: block;
    margin: 0 auto;
    background: url(images/header.png) no-repeat center;
    position: absolute;
    top: 0; /* Adjust */
    left: -25px; /* Adjust */
}

#center_piece {
    width: 1044px;
    height: 492px;
    display: block;
    /* remove margin: 0 auto; */
    background: url(images/center.png) no-repeat center;
    position: absolute;
    top: 0; /* Adjust */
    left: -25px; /* Adjust */
}

#h1_origin {
    position: relative;
    height: 50px; /* Adjust */
}

#center_piece_origin {
    position: relative;
    height: 50px; /* Adjust */
}

关于html - 居中，分层和定位。如何使前景从背景边缘突然爆发？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7994300/