Question

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

我想要达到的效果是在悬停时在图像上显示文字。

当从数据库中提取数据时，图像显示正常，而文本无处可见。 div意味着包含文字显示在图像上，这是我想要的，但没有文字可见。

即使在CHROME上的检查视图中，文本也显示在div内。

我已将检查视图复制并粘贴到另一个页面，因此不会从数据库中提取内容，文本显示正常。

很抱歉这段很长但需要解释，所以你们知道我已经尝试过了。

谢谢！

           <?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已有的规则中），然后就可以了。

从数据库中提取的DIVS和IMAGES显示为正常，但文本没有显示

1 个答案: