如何创建各种背景图像（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