Подпись изображения - PullRequest
Новая
       36

Подпись изображения

5 голосов
/ 14 апреля 2009

Какой самый удобный способ создания подписей к изображениям в Интернете с использованием новейших HTML / CSS? Демо-код, пожалуйста.

Ответы [ 7 ]

16 голосов
/ 14 апреля 2009

Существует несколько семантических способов разметки изображения и его подписи.

Старый школьный путь

Старый метод заключается в использовании списков определений HTML, см. Подпись к изображению семантическим способом . (Есть другие хорошие учебники , демонстрирующие этот метод.) 

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

Микроформат

Существует также фигурный микроформат , который применяется к любой обычной разметке: 

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

1019 * HTML5 * И теперь HTML5 предоставляет чистый прямой метод для изображений с подписями через элементы <figure> и <figcaption> . <figure> <img src="foo.jpg" alt=""> <figcaption>Foo</figcaption> </figure>

9 голосов
/ 14 апреля 2009

Я не мог объяснить это лучше, чем эта статья: http://www.cs.tut.fi/~jkorpela/www/captions.html

2 голосов
/ 14 апреля 2009

Я знаю, что видел несколько статей с хорошим кодом на www.alistapart.com, но вот одна из них, с которой можно начать: http://www.alistapart.com/articles/practicalcss/

1 голос
/ 14 апреля 2009
0 голосов
/ 28 апреля 2014

Вы можете использовать эти классные эффекты заголовка изображения.

Отличная подпись к изображению с помощью CSS

0 голосов
/ 23 августа 2010

Трудно перечислить все детали в посте здесь.

Вот несколько ссылок, подробно обсуждающих CSS-субтитры:

Полупрозрачные подписи к изображениям с использованием CSS

Полупрозрачные подписи к изображениям с использованием CSS и Javascript

CSS-субтитры с многоразовыми закругленными углами

и, наконец, автономный инструмент, который генерирует код CSS, необходимый для подписи изображения:

Инструмент для создания титров изображений CSS

0 голосов
/ 14 апреля 2009

Это то, что я бы сделал 

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

Поместить заголовок перед изображением в разметке и сделать его заголовком, я думаю, как можно более семантически приблизиться к тому, чтобы сказать "это картинка ..."

...