5

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

4

6 回答 6

16

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

老学校的方式

一种老派的方法是使用 HTML 定义列表，请参阅Image captions the semantic way。（还有其他很好的教程演示了这种方法。）

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

微格式

还有一个适用于任何常规标记的图形微格式：

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

HTML5

<figure>而 HTML5 现在通过和<figcaption>元素为带有标题的图像提供了一种干净直接的方法。

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>
于 2009-04-14T15:34:35.203 回答
2

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

于 2009-04-14T14:04:55.713 回答
1

编辑 -

悬停图像标题上的漂亮示例CSS

其他示例：网页上的图片说明

于 2009-04-14T13:53:17.943 回答
0

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

带有 CSS 的酷图片标题

于 2014-04-28T08:14:03.500 回答
0

这就是我会做的

.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>

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

于 2009-04-14T15:52:52.337 回答
0

很难在此处的帖子中列出所有详细信息。

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

使用 CSS 的半透明图像标题

使用 CSS 和 Javascript 的半透明图像标题

带有可重复使用圆角的 CSS 图像标题

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

CSS 图像字幕工具

于 2010-08-23T12:28:09.590 回答