Гость
Статистика Форума
Последнии темы Популярные темы Лучшии пользователи Новые пользователи
» [18.09.2018] Создание диалогов (0)
» [18.09.2018] Добавляем статьи в ПДА (0)
» [13.09.2018] Аномальная Зона | Anomalous Zone 1.6.00 (0)
» [13.09.2018] Проект Фантом / Project Phantom (0)
» [12.09.2018] Гид по прохождению Новый Арсенал 5.0 (2)
» [12.09.2018] Прохождение Оставшийся Умирать / Left To Die (0)
» [12.09.2018] S.T.A.L.K.E.R. GONE SOUL (0)
» [12.09.2018] N.I.K.S.O.N. MOD (ТЧ) (0)
» [12.09.2018] S.T.A.L.K.E.R. Forgotten Story Часть 1 (0)
» [10.09.2018] GUNSLINGER mod [S.T.A.L.K.E.R. CALL OF PRIPYAT] (1)
» Тайники и подсказки (82)
» Русскоязычное руководство по моду Frackin' Universe... (38)
» Фоны для сталкерского сайта (32)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» Личные сообщения (18)
» Проблемы в модуле "Пользователи" (17)
» Рамки сталкер / для аватарок / новостей. (13)
» Полный список предметов в переводе для STALKER ОП-2 (13)
» Sigerous Mod 2.2 + Albor Weapons Pack (13)
» Xemordio (2470)
» Duzeppa26 (5)
» Ghosteron (3)
» Бармен (1)
» Даниил_Хороший (1)
» Glomar (1)
» oleg2013 (0)
» marinak1984 (0)
» freez12332 (0)
» johnnym (0)
» [21.09.2018] kures80
» [16.09.2018] marinak1984
» [15.09.2018] johnnym
» [09.09.2018] LENA_D
» [09.09.2018] oleg2013
» [03.09.2018] zdarg
» [02.09.2018] nitro-oc
» [02.09.2018] oleg101
» [31.08.2018] Razilator
» [30.08.2018] Yuri_Geruk

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

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



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


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

09:27