根据数据库字段内容自动（非悬停）css覆盖答案

【问题标题】：automatic (not hover) css overlay depending on database field content根据数据库字段内容自动（非悬停）css覆盖
【发布时间】：2018-03-31 18:33:35
【问题描述】：

我想让以下引导代码自动显示数据库字段中包含的三个选项中的两个的叠加层。它们是 SOLD、CONTRACT 和 NO。

我希望 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>

【问题讨论】：

标签： php css twitter-bootstrap-3 overlay

【解决方案1】：

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

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);

}

【讨论】：