使用最新的HTML / CSS在网络上标题图片的最佳方法是什么?请演示代码。
答案 0 :(得分:16)
标记图像及其标题有几种语义方法。
旧学校方法是使用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现在通过<figure>
and <figcaption>
elements为带有字幕的图像提供了一种干净的直接方法。
<figure>
<img src="foo.jpg" alt="">
<figcaption>Foo</figcaption>
</figure>
答案 1 :(得分:10)
我无法解释它比这篇文章更好: http://www.cs.tut.fi/~jkorpela/www/captions.html
答案 2 :(得分:2)
我知道我在www.alistapart.com上看过很多带有一些好代码的文章 - 但是这里有一个让你开始:http://www.alistapart.com/articles/practicalcss/
答案 3 :(得分:1)
答案 4 :(得分: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>
将标题中的标题放在标记中并使其成为标题是我认为尽可能接近地说“这是......的图片”
答案 5 :(得分:0)
很难在这里的帖子中列出所有细节。
以下是一些深入讨论CSS Image Captioning的链接:
Semi transparent image captions using CSS
Semi transparent image captions using CSS and Javascript
CSS Image Captioning with Reusable Rounded Corners
最后是一个独立的工具,可以生成图像标题所需的CSS代码:
答案 6 :(得分:0)
您可以使用这些很酷的图片标题效果。