В статье мы рассмотрим один из вариантов оформления подписи к изображению.
Итак, приступим…
В контейнер div заключим нашу картинку и подпись к ней, html код следующий:
<div> <img alt="exp2" src="exp2.jpg" width="302" height="189" /> <span>Тут любая надпись, выступающая в качестве подписи к картинке</span> </div>
Приступим к непосредственному описанию css. Для контейнера зададим ширину и спозиционируем относительно его исходного места.
#exp { position: relative; width: 302px; }
У картинки уберем отступы, рамку и сделаем ее блочной.
#exp img { display: block; border: none; }
Осталось задать свойства для span. Также сделаем его блочным, зададим отступ от рамки до текста, спозицианируем абсолютно, разместим его у нижнего края картинки, зададим фон и шрифт:
#exp span { display: block; padding: 10px; width: 282px; //ширина должна быть как ширина исходной картинки за минусом отступов position: absolute; bottom: 34px; background: black; opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); text-align: center; color: white; font: 14px Arial; }
Итак, вот что в итоге получили:

Тут любая надпись, выступающая в качестве подписи к картинке
Отлично получилось, неправда ли? 🙂
Простое и красивое решение