Схема
Посмотреть ДЕМО
HTML
Code
<div class="image">
<img src="images/3754004820_91a5c238a0.jpg" alt="" />
<h2>ВсеБудетОк:<br />а может и нет</h2>
</div>
Проще всего было бы сделать картинку фоном слоя, однако в этом примере я расматриваю изображение как контент. Мы будем использовать этот обертывающий слой для абсолютного позиционирования.
CSS
Code
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
Данный код наложит текст сверху изображения, но он не позаботится о прозрачном черном фоне за текстом. Для этого мы не можем использовать <span style="color: blue;">h2</span>, так как это блочный элемент. А нам необходим инлайновый без заданой ширины. Кстати, позвольте небольшой оффтоп. В реализации этого скрипта для ucoz и просто в появлении идеи этого скрипта мне помог развлекательный портал - http://poleno.net. Именно на этом ресурсе собраны лучшие анекдоты и веселые стишки, вдохновившие меня на создание этого скрипта, ну ведь не шаблоны для ucoz, поэтому просто скрипта, спасибо, устанавливайте скрипт дальше.
Давайте добавим еще один (span) слой в тег h2:
Code
<h2><span>ВсеБудетОк:<br />а может и нет</span></h2>
Теперь давайте используем этот (span) слой для стилизации текста и фона:
Code
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
Проблема
Когда к инлайновому элементу мы добавляем перенос строки, он сразу же переносится на другую строку без отступа. Padding в таком случае не помогает.
Для решения этого мы добавим несколько <span style="color: blue;">span</span> с обоих сторон элемента <span style="color: blue;"><br /></span> для добавления отступа.
Code
<h2><span>ВсеБудетОк:<span class='spacer'></span><br /><span class='spacer'></span>а может и нет</span></h2>
В стилях пропишем отступ:
Code
h2 span.spacer {
padding:0 5px;
}
Исправляем семантику На данном этапе дизайн готов, но при этом было использовано много дополнительных HTML элементов. А именно много тегов<span style="color: blue;">span</span>. jQuery может нам помочь с этим. Убираем все <span style="color: blue;">span</span> из разметки и динамически их добавляем вот так:
Code
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class='spacer'>")
.after("<span class='spacer'>");
});
Исходники