Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [17.11.2018] Группа Кровавой Дороги [ГКД] (0)
» [17.11.2018] Анимат на форуме для uCoz (0)
» [17.11.2018] Скрипт: Новости по теме для uCoz (0)
» [17.11.2018] Скрипт "Орфограф" beta для uCoz (0)
» [16.11.2018] Бар "100 Рентген" (3)
» [09.11.2018] Инверсия | Inversion (2)
» [09.11.2018] Как оформить тему? (0)
» [09.11.2018] S.T.A.L.K.E.R. 2 (1)
» [09.11.2018] Даты выхода модов Сталкер (2)
» [09.11.2018] N.I.K.S.O.N. MOD (ТЧ) (2)
» Тайники и подсказки (82)
» FAQ прохождения по локациям DOPPELGANGER 7.63 Time Gap (50)
» Русскоязычное руководство по моду Frackin' Universe... (38)
» Фоны для сталкерского сайта (32)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» CoC Вылеты и их решение (21)
» Личные сообщения (18)
» Редактирование мода «Народная солянка Объединенный пак ... (18)
» Проблемы в модуле "Пользователи" (17)
» Xemordio (2886)
» NL-Vincenz (11)
» Duzeppa26 (5)
» Ghosteron (4)
» Glomar (1)
» Бармен (1)
» Даниил_Хороший (1)
» marinak1984 (0)
» johnnym (0)
» LENA_D (0)
» [16.11.2018] d0om801
» [13.11.2018] parabranma
» [13.11.2018] doon80
» [12.11.2018] lemberg123
» [09.11.2018] alurongdannov
» [09.11.2018] NL-Vincenz
» [07.11.2018] eugen55eugen
» [07.11.2018] kadastrapro
» [22.10.2018] subbotin440
» [19.10.2018] goooooooooogle380

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

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



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


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 » Скрипты для uCoz » Пишем текст поверх изображения
  • Страница 1 из 1
  • 1
Поиск:

01:20