使用 HTML/CSS 中的文本创建缩略图

【问题标题】：Create thumbnails with text in HTML/CSS使用 HTML/CSS 中的文本创建缩略图
【发布时间】：2013-09-01 05:57:30
【问题描述】：

我对 HTML 或 CSS 很陌生，也许我的要求很愚蠢。我怀疑是否可以创建一个显示图片和标题的缩略图，然后当您单击它时，会出现一个带有图片和大文本的“框”（类似于 Safari 的阅读器功能或其他功能）。有可能吗？

正如我之前所说，我只是从 HTML 和 CSS 开始。

【问题讨论】：

标签： javascript jquery html css thumbnails

【解决方案1】：

这确实是可能的。

首先我们创建一个 div，然后我们使用 css 选择背景属性，并使其适合。

代码如下：

<div class="img" style="
    overflow: hidden;
    height: 50px; <!-- Set the size of the div -->
    width: 50px;
    background: url(http://blog.moovweb.com/wp-content/uploads/2013/04/stackoverflow-logo.png);
    background-size: 50px 50px; <!-- Set the size of the image -->
    background-repeat: no-repeat;">
</div>

注意图像是如何变形以适合盒子的。

您可以通过在 div 中键入文本来添加文本，或者通过创建一个新文本来重新定位文本。

希望这会有所帮助！

【讨论】：

有史以来最大的缩略图！
对不起，我把它变小！