带图标覆盖的CSS缩略图

Question

所以基本上我需要在缩略图上设置图标/标签，如何用CSS和HTML做？如果可能的话，我需要它才能做出回应。提前谢谢。

编辑：很抱歉没有发布代码，这是我尝试使用Bootstrap 3和Font Awesome：

for i, row in df.iterrows():
    print(pd.notnull(row))
    if pd.notnull(row):
        df.loc[i, 'denyData'] = base64.b64decode(parse.unquote(row['denyData']))
    else:
        df.loc[i, 'denyData'] = np.nan

交付课程：

<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="img/test/test04.png" alt="thumb01">
            <div class="col-xs-3 col-md-6">
                <div class="delivery alert alert-success">
                    <i class="fa fa-truck" aria-hidden="true"></i>
                </div>
            </div>
        </a>
    </div>
</div>

Answer 1

确定。首先，如果您使用的是某个框架，请寻找使用它的解决方案。其次，如果您不使用结构，可以使用CSS中的@media来确定元素的响应性，对于布局，您要查找的是缩略图或图片卡，如果您遇到困难，请在互联网上搜索。您可以使用div中的图片和图标，然后使用CSS（display和float）来处理元素。玩得开心:)）