修改

Question

我正在尝试在图片上显示标题。

这是我的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

我的问题是如何将图像的标题添加到图像上方？任何评论都非常欢迎。

谢谢。

Answer 1

您应该将position:relative;用于容器，将position:absolute;用于您想要的图像上的子容器，它可以根据需要设置样式

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

Answer 2

将此添加到您的CSS

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

DEMO

修改

请注意，您在div代码中使用了a代码，因此请不要忘记将display: block添加到a.image-overlay代码，因为inline元素可以不包含任何其他类型的元素。它确实有效但会引起许多奇怪的问题。

对于初学者height:100%不适用于div内的a

仅使用HTML和CSS显示图像标题

2 个答案:

DEMO

修改