<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>
If there's a risk of the text running over more than one line you'll want to make the value of N bigger, otherwise 20px will do.
<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>
Putting the caption before the image in the markup and making it a heading is I think as close as you can semantically get to saying "this is a picture of ..."
发布评论
评论（6）
有几种语义方法可以标记图像及其标题。
老派方法
老派方法是使用 HTML 定义列表，请参阅 Image以语义方式添加标题。 （还有其他不错的教程演示了这种方法。）
微格式
还有一个 < a href="http://microformats.org/wiki/figure" rel="noreferrer">图形微格式 适用于任何常规标记：
HTML5
现在，HTML5 为带有标题的图像提供了一种干净直接的方法
和元素。There are several semantic ways to markup an image and its caption.
Old school way
An old school method is to use HTML definition lists, see Image captions the semantic way. (There are other nice tutorials demonstrating this method.)
Microformat
There is also a figure microformat which applies on any regular markup:
HTML5
And HTML5 now provides a clean straight method for images with captions through the
<figure>and<figcaption>elements.我知道我在 www.alistapart.com 上看过很多包含一些优秀代码的文章 - 但这里有一篇可以让您开始：http://www.alistapart.com/articles/practicalcss/
I know I've seen a number of articles with some good code over at www.alistapart.com - but here's one to start you off: http://www.alistapart.com/articles/practicalcss/
编辑-
很好的例子 CSS悬停图像标题
其他示例：网页上的图像标题
Edit -
Nice Example CSS on Hover Image Captions
Other Examples: Image captions on Web pages
这就是我会做的
如果存在文本运行超过一行的风险，您将需要使 N 的值更大，否则 20px 就可以了。
我认为将标题放在标记中的图像之前并使其成为标题最接近于语义上说“这是一张......的图片”
This is what I would do
If there's a risk of the text running over more than one line you'll want to make the value of N bigger, otherwise 20px will do.
Putting the caption before the image in the markup and making it a heading is I think as close as you can semantically get to saying "this is a picture of ..."
很难在此处的帖子中列出所有详细信息。
这里有一些深入讨论 CSS 图像字幕的链接：
半透明使用 CSS 的图像标题
半透明图像标题使用 CSS 和 Javascript
CSS 图像字幕可重复使用的圆角
，最后是一个独立工具，可生成图像标题所需的 CSS 代码：
CSS图像字幕工具
It's hard to list all the details in a post here.
Here's a few links that discuss CSS Image Captioning in depth:
Semi transparent image captions using CSS
Semi transparent image captions using CSS and Javascript
CSS Image Captioning with Reusable Rounded Corners
and finally a standalone tool that generates the CSS code necessary to caption an image:
CSS Image Captioning Tool
您可以使用这些很酷的图像标题效果。
带有 CSS 的炫酷图像标题
You can use these cool image caption effects.
Cool Image caption with CSS