html - 在图像上放置文字

Question

我正在尝试制作一个显示表格系列的页面。当我使用 foreach 显示表格中的所有结果时，它工作正常。但是当我尝试在每张图片上添加文字时，问题就出现了。我制作了图像 position: relative; 和文本 position: absolute; 但所有文本仅成为第一张图像 .

fidde link

<div class="container maincontainer">
<div class="container ser text-center">
<ul>
<?php
$i=0;
$stmt = $con->prepare("SELECT * FROM series ORDER BY added_date DESC");
$stmt->execute();
$rows = $stmt->fetchAll();
foreach($rows as $row){ 
echo '
<div class="imgdiv">
<a href="series.php?id=' . $row['seriesID'] .'">
<img class="images" src="'. $dirnam .'cp/uploads/posters/'.$row['poster'].'"></a><div style="position: absolute;z-index:1100;">calc</div>'; ?>
<?php
} ?>

CSS:

.images{
    float: left;
    height: 300px;
    width: 16.66666%;
    padding:1px;
   border:1px solid #021a40;
   background-color:#ff0;

}
.series{
    margin: 0px auto;
    padding:0;
    width: 100%;
    overflow: hidden;


}


.imgdiv:hover img {
  opacity: 0.7;
}
.srchbox{
    margin-left: 50px;
    float:right;
    height: 30px;
    padding-top: 0px;
}
.ser{
    margin: 0px auto;
    padding:0;
    width: 90%;
    margin-top: 36px;
}

.maincontainer{
    width: 100%;
    background-color: rgba(34, 34, 34, 0.65);
}

Answer 1

这些元素都没有 position: relative，至少在您发布的代码中没有。因此，绝对定位的文本元素没有“定位 anchor ”。

在评论和发布 FIDDLE 后编辑:

您应用于图像的大部分设置( float 、大小、相对位置等)应该应用于 imgdiv 类。图片本身应该只有 100% 宽度和自动高度。

看看这个包含解决方案的 fiddle ，如果你不明白什么，请告诉我:

https://jsfiddle.net/bn70byh8/1/

注意:如果你绝对想拉伸(stretch)图像高度以完全覆盖它们的容器，你可以在图像上使用 height: 100%。但是，这会改变宽/高比并可能扭曲图像。