php - 根据数据库字段内容自动(不是悬停)css 覆盖

Question

我想让下面的 Bootstrap 代码自动显示数据库字段中包含的三个选项中的两个的叠加层。它们已售出、已签约且未售出。

我想要不同的 SOLD 和 CONTRACT 叠加层，NO 没有叠加层

我已经搜索过叠加层，大多数教程都有关于悬停事件的信息，但我不知道如何执行此操作。

<div class="row">
<div class="col-md-6 col-md-offset-3">
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>">
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/>
</a>
</div><br><br>
 </div>

Answer 1

我在这里通过几个 js fiddle 解决了其他问题，如果它对这里的任何人有帮助，我添加的代码...

html我在图像下方添加了一个缩略图 div 和一个标题 div，两者都以数据库字段的内容为条件。

<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?> 
<div class="caption post-content-sold"></div>
<? } ?>
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?> 
<div class="caption post-content-contract"></div>
<? } ?>

然后在 CSS 中我添加了代码使缩略图相对，然后添加了两个类来设置与数据库字段相关的图像样式

.thumbnail {
position: relative;
}

.post-content-sold {
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
opacity: 0.8;
top:0;
left:0;
min-width: 100%;
max-height: 98%; 
position: absolute;
color: #ffffff; 
content:url(http://www.mtnlakerealty.com/sold.png);

}
.post-content-contract {
background: rgba(255, 255, 0, 1) none repeat scroll 0 0;
opacity: 1;
top:5%;
left:5%;
max-width: 50%;
max-height: 50%; 
position: absolute;
color: #ffffff; 
content:url(http://www.mtnlakerealty.com/contract.png);

}