0

我正在尝试制作两个重叠<div>的 s，其中一个是突出的图像并且它在顶部，另一个是更多的背景图像。但我希望背景图像始终位于主图像的中心。那就是我开始遇到问题的地方。

    ________
   |        |
 __|        |__
|  |        |  |
|  |        |  |
|__|        |__|
   |        |   
   |________|

上面是我想要的快速文本图像。

编辑：可能很重要的是要注意顶部的图像是实际<img>的，而下面的 div 是一个空的<span>，我给了宽度和高度。

4

3 回答 3

0

如果它们是固定尺寸，那么您可以将容器设置为position:relative;它的子级，postion:absolute;然后设置跨度/图像顶部/左侧百分比以产生集中的错觉......然后z-index确保事物正确分层。

检查 - http://jsfiddle.net/V4GEy/4/

于 2012-11-09T21:48:25.127 回答
0

您可以制作一个包含两个 div 的包装器。然后将背面图像居中，在包装器中。之后，使用 z-index 在顶部显示另一个图像。

http://www.w3schools.com/cssref/pr_pos_z-index.asp

于 2012-11-09T21:02:54.610 回答
0

好吧，我明白了。我制作了一个容器并将其设置为相对位置，然后将背景跨度绝对定位为 50%。

#container {
    outline: 2px solid red;
    width: 400px;
    display: block;
    margin: 10px auto;
    position: relative;
}

#image {
    width: 250px;
    height: 400px;
    background-color: grey;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

#background {
    width: 400px;
    height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #4B4B4B;
    z-index: -1;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

JsFiddle 链接：： http: //jsfiddle.net/Calebmer/Umx9K/

于 2012-11-16T20:06:36.150 回答