Как на картинке в html сделать надпись

Как на картинке в html сделать надпись

Как на картинке в html сделать надпись

Как на картинке в html сделать надпись

Как на картинке в html сделать надпись

Хороший способ подписать и украсить картинку. Можно добавлять как текст, так и еще одну картинку.
1. !DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. CSS

.image { position: relative; width: 100%; / для IE 6 / } h2 { position: absolute; top: 466px; left: 0; width: 100%; } h2 span { color: #fff; font-size: 30px; line-height: 55px; background: rgba(0, 0, 0, 0.7); background: #000; padding: 10px 10px 10px 16px; }

3. HTML

<div class="image"> <img src="image.jpg" alt="" /> <h2><span>Сэр Шрек,&nbsp;&nbsp;<br />&nbsp;&nbsp;Кот в сапогах и Осёл.</span></h2> </div>

Неразрывные пробелы &nbsp добавлены для того, чтобы background текста не заканчивался после последнего символа в первой строке, и чтобы текст не прилипал к левому краю блока во второй строке.
К сожалению в Internet Explorer прозрачность бэкграунда, в данном примере, не наблюдается.


Источник: http://jemand.ru/tekst-poverx-kartinki-na-css/


“-5-10 Как на картинке в html сделать надпись