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: block到您的a.image-overlay标签，因为inline元素不能包含任何其他类型的元素。它确实有效，但会导致许多奇怪的问题。

对于初学者来说height:100%不适用于div内部a

于 2013-07-27T04:14:45.517 回答