從db中拉出的DIVS和IMAGES顯示爲正常，但文本不顯示

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），然後你去。