php - 如何创建各种背景图像(div)

Question

我的数据库中有新文章(标题、副标题、日期和图像)，我正在尝试以正确的方式显示 card here我已经像示例一样在 CSS 中进行了尝试，但这只适用于一张图片。我在同一页上显示了其中的三个。

还有另一个问题，图像是通过 ckfinder 添加的，它总是包含一个 P 标签和 img 标签。

所以我尝试使用 img 标签作为背景，但图像出现在右侧。

if ($result->num_rows > 0 ) {
   while ($row = $result->fetch_assoc()) {
      if ($row['aafbeelding'] == ''){
         echo "<img src='images/tumbnail.png' class='w3-third'>";
      } else {
         echo $row["aafbeelding"];
      }
   echo "<div class='wrapper'><div class='header'><div class='date'><span class='day'>12</span><span class='month'>Aug</span><span class='year'>2016</span></div></div><div class='data'><div class='menu-content'>";
   echo "<h1 class='title'><a href='#'>".$row["titel"]."</a></h1>";
   echo "<p class='text'>".$row["subtitel"]."</p>";
   echo "<a href='#letstenuujts' class='button'>Laes meer</a>";
   echo "</div></div></div></div>";
}

$row["aafbeelding"] 例如:

<p><img alt="" src="http://localhost/tuinhagedisse/images/Sponsors/Hermus.png" style="height:213px; width:480px" /></p>

CSS =

.example-2 img {
    position:absolute;
    z-index:0;
}

我怎样才能确保图像包含示例中的背景但又是动态的？

另外，我已经想到了一个解决方案，但是我需要 CKfinder 只将路径上传到服务器，所以没有 p 和 img 标签高度等。这可能吗？

Answer 1

可以只使用 CSS。

if ($result->num_rows > 0 ) {
   while ($row = $result->fetch_assoc()) {
      echo "<div class='example'>";
      if ($row['aafbeelding'] == ''){
         echo "<img src='images/tumbnail.png' class='w3-third'>";
      } else {
         echo $row["aafbeelding"];
      }
      echo "<div class='wrapper'><div class='header'><div class='date'><span class='day'>12</span><span class='month'>Aug</span><span class='year'>2016</span></div></div><div class='data'><div class='menu-content'>";
      echo "<h1 class='title'><a href='#'>".$row["titel"]."</a></h1>";
      echo "<p class='text'>".$row["subtitel"]."</p>";
      echo "<a href='#letstenuujts' class='button'>Laes meer</a>";
      echo "</div></div></div></div>";
   }
}

.example {
  position: relative;
  display: inline-block;
  background-color: #000;
}

.example > p {
  display: inline;
}

.example img {
  display: block;
  opacity: 0.5;
  height: 213px;
  width: 480px;
}

.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
}

JSFiddle for static example