Гость
Обновленые темы Популярные темы Активные пользователи Новые пользователи Лента новостей
Аниме обои [24.06.2019]
Флудилка [24.06.2019]
Xemordio 3574 |  11 |  63
Бармен 43 |  7 |  0
Infe[R]nos 38 |  5 |  1
StraNNik 25 |  1 |  0
Waldemar 12 |  0 |  2
NL-Vincenz 12 |  0 |  3
pitersskii [26.06.2019]
lysikov-l [24.06.2019]
velesgod111 [24.06.2019]
gltimofey [21.06.2019]
vantuz29122004 [20.06.2019]
aslava406 [16.06.2019]

  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Скрипты для uCoz » Пишем текст поверх изображения
Пишем текст поверх изображения
Xemordio Offline Дата: Суббота, 08.09.2018, 13:01 | Сообщение # 1
Администратор
Звание: Маршал [?]
Сообщений: 3574
Вообще, сам вопрос несложен. Нет ничего хитрого, чтобы расположить один блок, поверх другого. Но всё-таки, есть и в этом вопросе несколько моментов, достойных обсуждения. Я думаю найдутся люди, кому это будет интересно.

Идея состоит в том, чтобы просто накладывать некоторый текст на изображение. Текст представлен в виде блоков переменной длины, предполагается что он будет расположен с левой стороны, с ровной заливкой вокруг текста. Например, как на этом изображении:



Схема документа


HTML-разметка
Код
<div class="image">
    <img src="image1.jpg" alt="" />
    <h2>A Movie in the Park:
Kung Fu Panda</h2>
</div>

Конечно, было бы легче использовать div-элемент для вывода изображения в качестве фонового рисунка, но в данном случае я предполагаю, что изображение - это контент документа, и, следовательно, оно принадлежит HTML. Элемент div будем использовать в качестве контейнера для абсолютного позиционирования текста в нём.

CSS
Код
.image {
    position    : relative;
    width  : 100%; /* for IE 6 */
}

h2 {
    position    : absolute;
    top  : 200px;
    left  : 0;
    width  : 100%;
}

Таким образом, мы разместили текст непосредственно поверх изображения. Следующая наша задача сделать фон для текста. Поскольку элемент <h2> является блочным элементом, то его мы использовать для этих целей не можем. Воспользуемся inline-элементом <span>. Обернём в него текст внутри заголовка.
Код
<h2><span>A Movie in the Park:
Kung Fu Panda</span></h2>

Будем использовать этот span для оформления текста и фона:
Код
h2 span {
    color   : white;
    font   : bold 24px/45px Helvetica, Sans-Serif;
    letter-spacing  : -1px;
    background  : rgb(0, 0, 0); /* на случай, если следующая строка не сработает */
    background  : rgba(0, 0, 0, 0.7);
    padding   : 10px;
}

Проблемы

Как видно из рисунка, в конце строки блок текста заканчивается непосредственно после последнего символа в строке, и начинается сразу же по левому краю на следующей строке. Свойство padding для span-а, в данном случае, нам не поможет.

Чтобы решить проблему, необходимо использовать дополнительные span-ы по обе стороны от тега
, в этом случае мы уже сможем воспользоваться padding-ом.
Код
<h2>
    <span>A Movie in the Park:
  <span class="spacer"></span>
  

  <span class="spacer"></span>
  Kung Fu Panda
    </span>
</h2>

Этим новым span-ам мы зададим свойство padding:
Код
h2 span.spacer {
    padding    : 0 5px;
}

Что на счёт семантики?
На данном этапе дизайн завершен, но при этом осталась одна проблема. А именно, огромное количество дополнительных элементов HTML добавленных только для дизайна. Я имею в виду span-ы. Чтобы решить эту проблему, воспользуемся jQuery. Для этого удалим все span-ы в разметке, и динамически добавим их:
Код
<h2>
    A Movie in the Park:
Kung Fu Panda
</h2>
$(function() {
    $("h2").wrapInner("<span>");
    $("h2 br").before("<span class='spacer'>")
  .after("<span class='spacer'>");
});

Источник: http://www.css-tricks.ru/
Дата регистрации: 22.07.2017
Форум » Web-Раздел » Скрипты для uCoz » Пишем текст поверх изображения
  • Страница 1 из 1
  • 1
Поиск: