1

画像にキャプションを表示しようとしています。

これは私のHTMLです

            <div class="image-hover">               

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      

                <div class="image-block">
                    <a href="" target="_blank" class="image-overlay">
                        <div class="details">
                            <h4>Our philosophy and Vision</h4>
                        </div>
                        <div class="image-backdrop">
                            <img src="http://buildinternet.s3.amazonaws.com/projects/mosaic/omr-office.jpg"/>
                        </div>                          
                    </a>
                </div>                      


            </div>

これは私のCSSです:

.image-hover {
    overflow: hidden;
}

.image-hover .image-block {
    width: 234px;
    height: 100px;  
    display: inline-block;
    border: 1px solid #666666;

}

.image-hover .image-block img {
    width: 230px;
    height: 100px;  
    border: 2px solid #fff;
}

.details, .image-backdrop {
    float: left;
}

.details h4:after {
    display: inline-block;
  content:" ";
  width: 0; 
  height: 0; 
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #666666;
  margin: 0 10px;
}

これは私のJsFiddelです

私の問題は、画像のキャプションを画像の上に表示するにはどうすればよいですか? どんなコメントでも大歓迎です。

ありがとうございました。

4

2 に答える 2

2

position:relative;コンテナと子コンテナに使用する必要がありposition:absolute;、イメージ上で必要に応じてスタイルが設定されます

http://jsfiddle.net/ADMvd/2/

于 2013-07-27T04:16:50.297 に答える
0

これを CSS に追加します

.details h4 {
    color: white; /* just to make it look pretty */
}
.details {
    position: absolute;
}
.image-overlay {
    position: relative;
}

デモ

編集

divタグ内でタグを使用していることに注意してください。要素には他のタイプの要素を含めることができないため、タグaに追加することを忘れないでください。それは機能しますが、多くの奇妙な問題を引き起こします。display: blocka.image-overlayinline

まず、内部height:100%では機能しませんdiva

于 2013-07-27T04:14:45.517 に答える