老派的方式

旧学校方法是使用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>

Answer 2

我无法解释它比这篇文章更好： http://www.cs.tut.fi/~jkorpela/www/captions.html

Answer 3

我知道我在www.alistapart.com上看过很多带有一些好代码的文章 - 但是这里有一个让你开始：http://www.alistapart.com/articles/practicalcss/

Answer 4

修改

很好的例子CSS on Hover Image Captions

其他示例：Image captions on Web pages

Answer 5

这就是我要做的事情

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

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