Web开发者在HTML当中使用图片说明已经有很长的历史了，这涉及到典型的<figure>和<figcaption>图形元素，再附上一些额外的CSS样式。在大的开源项目中我们甚至能找到更多更大的用在构建图片说明上的插件和启动器脚本的案例。
本文收集了关于制作HTML图片说明所要的CSS3和jQuery的解决方案列表，以帮助开发者各取所需，创建更加优美的图片说明代码库。 一、CSS2/CSS3 构建带有CSS效果的个人图片说明会很难，有时候你不得不求助于浏览器hacks或借助一些额外的语法。这些方案是很好的案例，能够提供建立在CSS2属性和CSS3过渡动画基础上的图片说明效果。 1. Label.CSS
Label.CSS是CSS3图片标题库里最好的一个，它允许在被说明的图片上添加类名称，之后可以在HTML里更新。你可以把标题添加到图片上的任何地方。添加Label.CSS库可以让鼠标悬停在图片上时隐藏说明变得轻而易举。这项技术很不错，因为有时候你可能希望图片说明在网页上以静态文本的形式出现，而有的时候隐藏的动画效果更重要的。 2. Hongkiat图片标题
关于Hongkiat，我最喜欢的就是各种图片在使用不同的CSS3技术后显示的图片说明。它们都将被成对的放入一个大的图片标题库，你还可以挑选出你最喜欢的动画来打造一个崭新的界面。代码都已经通过新的浏览器测试并且支持所有的CSS3前缀。 不过最大的问题在于一些用户所使用的脚本不遵循<figure>和<figcaption> HTML结构。所有的标题内容都存放在div的范围内。很明显，标题内容被完美的呈现出来，但不会标记内容的确切类型。它的优点是只需5-10分钟来更新图形元素就能让它在更格式化的结构中工作。点击现场演示来观察这些图片标题的运行过程。 3. 动画的HTML5标题 来自Coalmarch的HTML5 figcaption示例是一个漂亮简单的CSS3图片说明教程。在短短几分钟之内完成几个步骤就可以得到一个炫耀的布局来展示隐藏的悬停字幕。脚本自身含有少量的jQuery，但它完全可以取代jQuery并使用CSS3图片过渡效果。 4. 幻灯片图片标题
CSS-Tricks博客在Web设计社区有很好的名声，他们制作的滑动图像说明教程已经在大量的浏览器上完美无瑕的测试过了。我对它的演示印象深刻，倒不仅仅是因为它的效果完美，还有它标准的HTML语法。<figure>和<figcaption>图形元素不仅仅意味着好的方法，还可以帮助浏览器区分不同页面元素之间的内容，点击现场演示来观察它的效果。 二、jQuery 使用jQuery的最大好处就是获得很高的浏览器支持率。任何使用JavaScript的人都应该像检查浏览器一样查看图片标题，CSS3使用起来更简单因为开发人员没有在其中加入脚本语言。这些方案都很重要，对前端体验有极大地促成作用。 1. Caption.js
不久前发现Caption.js，此库已经出色的为Web开发者提供优秀的来源。该脚本以图片为目标建立在jQuery选择器上并且能够自动加入<figure>和<figcaption>图形元素。这是非常重要的，因为最后页的渲染将会伴随着一些CSS的定位而被适当显示。Caption.js是开源的，可免费从Github下载。 |
