html - 从数据库中提取的 DIVS 和图像正常显示，但文本不显示

Question

我完全不知所措。我正在构建一个投资组合网站，其中带有各自标题和描述的图像从数据库中提取并显示在一个漂亮的画廊中。

我想要实现的效果是在悬停时让文字出现在图像上。

当从数据库中提取数据时，图像显示正常，而文本却无处可见。包含文本的 div 显示在图像上，这是我想要的，但看不到任何文本。

即使在 CHROME 上的检查 View 中，文本也会显示在 div 中。

我已经从检查 View 复制并粘贴到另一个页面，所以内容不会从数据库中提取，文本显示正常。

抱歉，段落很长，但它需要解释，以便你们知道我已经尝试过什么。

谢谢!

           <?php

            $query = "SELECT * FROM `portfolio` ORDER BY `pf_id` DESC";
            $result = mysqli_query($con, $query);

            $list = '';

            while ($row = mysqli_fetch_array($result)) 
            {
                //Linking the variables
                $id = $row["pf_id"];
                $title = $row["pf_title"];
                $desc = $row["pf_desc"];
                $pfimg = $row["pf_html"];

                $date = $row["pf_date"];
                $time = strtotime($date);
                $datemdy = date("F j, Y", $time);
                $datetime = date("g:i A", $time);

                $list .= '<a href="pfpiece.php?id='.$id.'">' . $pfimg . '</a>';

            }

        mysqli_close($con);

        ?>
        <div class="pf-container">
            <p><?php echo $list; ?></p>
        </div>

这将生成这段 html，它自己可以正常工作，只是从数据库中提取时不行。

<div class="pf-img-wrap">
<img src="/uploads/portfolio_items/IMG/1.jpg">
<div class="pf-img-title">2</div>
</div>

这个的CSS:

.pf-container 
{
    width:100%;
    text-align: center;
    background-color: #fff;
    font-size:0;
}

.pf-img-wrap 
{
    width:calc(100% / 3);
    display: inline-block;
    margin:0;
    position:relative;
}

.pf-img-wrap img
{
    position:relative;
    width:100%;
    height:40%;
    object-position: 50% 50%;
    -o-object-fit: cover;
    object-fit: cover;

    -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.pf-img-wrap img:hover 
{
    -webkit-filter: brightness(65%);
}

.pf-img-title {
    position: absolute;
    z-index:60;
    color: #fff;
    background-color:red;
    margin-top:10px;
    width:90%;
    height:90%;
    top:0;
    clear:both;
}

Answer 1

您在 CSS 规则中将字体大小设置为零:

.pf-container {
    width: 100%;
    text-align: center;
    background-color: #fff;
    font-size: 0;
}

因此，将这些 div 设置为零以外的值(也许在您已经为 .pf-img-title 制定的规则中)然后就可以了。