css - 在网格中的图像上创建一个带有文本的框

Question

我正在尝试创建一个包含 3 列 12 张图像的 GridView ，每列底部都有一个文本框覆盖。在我尝试将文本框放在顶部之前，我的网格工作得很好。我觉得带有文本的框应该是图像的子项，但我不确定该怎么做。

我目前只将这些类应用到第一张图像，以尝试在移动到其他图像之前让它正常工作。我还遇到了一个问题，试图让文本在框的中间对齐。如果有人可以帮助我解决其中一个/两个问题，我们将不胜感激!

这是我的CSS:

section{
width: 940px;   
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;    
}

.grid-large {
margin: 16px 0 0 16px;
float: left;
}

.transbox {
height: 50px;
width: 300px;
margin-top: -50px;
background-color:#362e26;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}

.category-label{
color: #fff;
margin: 0;
margin-left: 15px;
margin-top: 5px;
vertical-align: middle;
}

.first {
margin-left: 0;
}

和我的 html:

<section>
<img src="./images/gowns.jpg" width ="300" height="300" class="grid-large.first">
<div class="transbox">
<p class="category-label">wedding gowns</p> 
</div>
<img src="./images/bridesmaid.jpg" width ="300" height="300" class="grid-large">
<img src="./images/menswear.jpg" width ="300" height="300" class="grid-large">

<img src="./images/venues.jpg" width ="300" height="300" class="grid-large.first">
<img src="./images/planners.jpg" width ="300" height="300" class="grid-large">
<img src="./images/photographers.jpg" width ="300" height="300" class="grid-large">
</section>

Answer 1

我会让图像成为 div 的背景图像，它应该包含文本标签，而不是试图将 div 放在图像顶部。在具有背景图像的 div 中，您可以添加带有文本的新 div，并将它们放置在图像上您想要的任何位置。

像这样:

<div id="picturegrid">
    <div id="gowns">
        <p>Wedding gowns<p>
    </div>
</div>

和

#gowns { 
background: center transparent url(./images/gowns.jpg) no-repeat; 
}

此链接也可能对您有所帮助:http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/