标题图像

时间:2009-04-14 13:50:03

标签: html css markup semantic-markup

使用最新的HTML / CSS在网络上标题图片的最佳方法是什么?请演示代码。

7 个答案:

答案 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

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)

修改

很好的例子CSS on Hover Image Captions

其他示例:Image captions on Web pages

答案 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代码:

CSS Image Captioning Tool

答案 6 :(得分:0)

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

Cool Image caption with CSS