Captioning an image [closed]

问题

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 4 months ago.

What's the neatest way to caption images on the web using the latest in HTML/CSS? Demo code please.

回答1:

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

<dl>
    <dt><img src="foo.jpg" /></dt>
    <dd>Foo</dd>
</dl>

Microformat

There is also a figure microformat which applies on any regular markup:

<div class="figure">
  <img class="image" src="foo.jpeg" alt="" /><br/>
  <small class="legend">Foo</small>
</div>

HTML5

And HTML5 now provides a clean straight method for images with captions through the <figure> and <figcaption> elements.

<figure>
  <img src="foo.jpg" alt="">
  <figcaption>Foo</figcaption>
</figure>

回答2:

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/

回答3:

Edit -

Nice Example CSS on Hover Image Captions

Other Examples: Image captions on Web pages

回答4:

This is what I would do

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

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

回答5:

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

回答6:

You can use these cool image caption effects.

Cool Image caption with CSS

来源：https://stackoverflow.com/questions/747652/captioning-an-image