0

私は 2 つの重なり合う<div>s を作成しようとしています。そのうちの 1 つは目立つ画像で、上にあり、もう 1 つは背景画像です。しかし、背景画像を常にメイン画像の中央に配置したい. それが私が問題を抱え始めるところです。

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

上記は、私が欲しいものの簡単なテキスト画像です。

<img>編集: 上の画像は実際のもので、下の div<span>は幅と高さを指定した空であることに注意することが重要かもしれません。

4

3 に答える 3

0

両方の div を含むラッパーを作成できます。次に、ラッパーで背面の画像を中央に配置します。その後、z-index を使用して他の画像を上に表示します。

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

于 2012-11-09T21:02:54.610 に答える
0

それらが固定寸法である場合は、コンテナposition:relative;とその子をpostion:absolute;設定してから、スパン/画像の上部/左のパーセンテージを設定して、集中化の錯覚を与えることができます..次にz-index、物事が正しくレイヤー化されるようにします。

チェック - http://jsfiddle.net/V4GEy/4/

于 2012-11-09T21:48:25.127 に答える
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 に答える