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

如何创建各种背景图片（div）

1 个答案: