1

ライトボックス効果を使用してポップアウトされた画像の上に HTML テキストを配置しようとしています。このために、私は3つのボックスを使用しています - ライトボックス効果を持つポップアウトされたdiv address_box - アウトライン画像アドレスに過ぎないボックス内のdiv - このdivをaddress_box画像に課したい

HTML:

<div class="box">
    <div id="move_in_img"><img src="img/ready-to-move-in.gif" /></div>
    <div id="address_box"><img src="img/address-box.png" />
    <div id="address">The address text
</div>
</div>

CSS:

.box
        {
            position:absolute;
            top:20%;
            left:12%;
            text-align:center;

            width:940px;
            height:321px;
            background:#F9E5B9;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display:none;
        }

.box #move_in_img{
float:left;
margin-left:20px;
margin-top:50px;
}

#address_box{
position:relative;
}
#address{
position:absolute;
}

「ボックス」プロパティはライトボックス効果を与えるように設定されており、絶対から相対に変更することはできません。私は多くの検索を行い、ポジショニングと z-index を試しましたが、すべて失敗しました。テキストは単に address_box の下に表示されます。

私がやろうとしているのは、ライトボックス効果を実装することですが、テキストを画像として表示したくありません。私は正しいアプローチをとっていますか、それとももっと良い方法がありますか??

ここに貼り付けビンのリンクがありますhttp://jsbin.com/anehey/1/edit フレーム用にネットからサンプル画像を選んだだけです。枠内に文字を入れたい...

4

1 に答える 1

2

動作するデモが提供されていないため、ここでやろうとしていることは得られません。通常、そのようなことをしたい場合position: relative;は、コンテナ div に使用し、課されたテキスト div にposition: absolute; width: 100%;&を使用しますbottom: 0;

HTML

<div class="container">
   <img src="#" />
   <div class="text"></div>
</div>

CSS

.container {
   position: relative;
   /*Set Height Width Accordingly*/
}

.text {
   position: absolute;
   bottom: 0;
   height: /*Whatever*/;
   width: 100%;
}

デモ(私の回答とは関係ありませんが、彼が求めていたものを修正しました)

于 2012-12-08T16:28:49.457 に答える