为图像添加字幕[关闭]答案

【问题标题】：Captioning an image [closed]为图像添加字幕[关闭]
【发布时间】：2009-04-14 13:50:02
【问题描述】：

使用最新的 HTML/CSS 为网络上的图像添加字幕的最简洁方法是什么？请演示代码。

【问题讨论】：

我无法比这篇文章更好地解释它：cs.tut.fi/~jkorpela/www/captions.html
我会说这个链接中使用表格的例子是错误的。表格应该用于排列数据。
我同意你的观点......但是该链接还提供了使用纯 CSS 格式化标题的方法。表格布局示例可提供替代方法来执行此操作。我认为有很多可用的方法是个好主意。我强烈建议只使用 DIV 布局。
这篇文章（最初由@jgallant 发表）似乎解决了OP 的问题：cs.tut.fi/~jkorpela/www/captions.html

标签： html css markup semantic-markup

【解决方案1】：

有几种语义方法可以标记图像及其标题。

老派的方式

一种老式的方法是使用 HTML 定义列表，请参阅Image captions the semantic way。（还有其他nice tutorials演示了这个方法。）

<dl>
    <dt><img src="foo.jpg" /></dt>
    <dd>Foo</dd>
</dl>

微格式

还有一个figure microformat 适用于任何常规标记：

<div class="figure">
  <img class="image" src="foo.jpeg" alt="" /><br/>
  <small class="legend">Foo</small>
</div>

HTML5

HTML5 现在通过<figure> and <figcaption> elements 为带有标题的图像提供了一种简洁直接的方法。

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>

【讨论】：

这是我最喜欢的许多可能的方法。
@Torok - 谢谢！ +1。但是“图像标题的语义方式”链接已经失效:(
这是archived version of "Image captions the semantic way"的链接；也就是说，除了上面已经给出的示例（使用
）之外，本文仅讨论作者是如何得出这个解决方案的。

【解决方案2】：

我知道我已经在 www.alistapart.com 上看到了一些包含一些好的代码的文章 - 但这里有一篇文章可以让你开始：http://www.alistapart.com/articles/practicalcss/

【讨论】：

【解决方案3】：

编辑 -

很好的例子CSS on Hover Image Captions

其他示例：Image captions on Web pages

【讨论】：

我已经可以听到 CSS 纯粹主义者对这个问题的看法......
好吧，我想你可能会争辩说，一个只包含单个图像的表格只是因为它的标题方面正在与“布局表格”的行调情 - 你可以说，我会用这个:)

【解决方案4】：

这就是我要做的

.img-container {position:relative;}
,img-container h4{position:absolute;bottom:0; left:0;height:Npx;line-height:20px; font-size:18px;}
.img-container img {margin-bottom:Npx;}

如果文本存在超过一行的风险，您需要使 N 的值更大，否则 20px 就可以了。

<div class="img-container">
<h4 class="caption">A picture of a dog</h4> //or h3, or h5 etc... - whichever is most appropriate given how you've used headings on your site
<img src,,,,>
</div>

在标记中将标题放在图像之前并使其成为标题，我认为在语义上尽可能接近地说“这是...的图片”

【讨论】：

【解决方案5】：

在这里很难在帖子中列出所有详细信息。

以下是一些深入讨论 CSS 图像标题的链接：

Semi transparent image captions using CSS

Semi transparent image captions using CSS and Javascript

CSS Image Captioning with Reusable Rounded Corners

最后是一个独立的工具，可以生成为图像添加字幕所需的 CSS 代码：

CSS Image Captioning Tool

【讨论】：

【解决方案6】：

您可以使用这些很酷的图片标题效果。

Cool Image caption with CSS

【讨论】：