Гость
Статистика Форума
Последнии темы Популярные темы Лучшие пользователи Новые пользователи
» [22.02.2019] Потерянная судьба (0)
» [22.02.2019] Белый "Информер Комментарий" ri... (4)
» [20.02.2019] Скроллбар по "экрану" rip Барме... (0)
» [19.02.2019] Информер "Новые Комментарии" ri... (5)
» [19.02.2019] Достижения для вашего сайта! (2)
» [18.02.2019] Флудилка (20)
» [17.02.2019] Нужна помощь с аякс окном (2)
» [16.02.2019] Beautiflly Faction Commander (0)
» [13.02.2019] Lost earth project mod (0)
» [12.02.2019] Красиво анимированные социальные кнопки r... (0)
» Тайники и подсказки (82)
» FAQ прохождения по локациям DOPPELGANGER 7.63 Ti... (50)
» Русскоязычное руководство по моду Frackin' U... (38)
» Фоны для сталкерского сайта (33)
» [DMX] Народное творчество (24)
» Ui Icon Equipment (UIE) - Все иконки для игры Ст... (23)
» Capital-Rp Wikia Code (22)
» ГИД Прохождение остальных квестов ОП - 2 (21)
» CoC Вылеты и их решение (21)
» Флудилка (20)
» Xemordio (3231)
» Infe[R]nos (35)
» Бармен (17)
» StraNNik (13)
» NL-Vincenz (12)
» Waldemar (12)
» Duzeppa26 (5)
» Ghosteron (5)
» ZION (1)
» ekaterinayuakovec (1)
» [22.02.2019] maxvladbabkin
» [21.02.2019] blablabla_827
» [20.02.2019] михайлович
» [15.02.2019] aleck1962
» [15.02.2019] maks4678596557
» [14.02.2019] rustam-badrutdinov
» [11.02.2019] ekaterinayuakovec
» [09.02.2019] amora617delpachi
» [09.02.2019] wrafalskiy
» [02.02.2019] Waldemar

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

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



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


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
Поиск:

19:58