Показано с 1 по 8 из 8

Тема: наложение картинок

  1. #1

    Регистрация
    19.11.2003
    Адрес
    Moscow
    Сообщений
    63
    я очень давно не верстал.. уже всё позабыл..

    подскажите, как можно наложить одну картинку на другую и какие существуют "опции"..

    насколько я помню это делается с помощью слоев, но не помню как...
    если кто-то может - объясните как можно подробнее...

  2. #2

    Регистрация
    08.03.2005
    Адрес
    этих
    Сообщений
    275
    ну... хы...
    чтоб такое забыть - нада амнезию получить, а не просто давно не верстать...

    Корочи, если те это надо не через пхп делать, то:
    рисуешь картинку которая будет накладываться, либо гиф с прозрачностями (иначе не имеет смысл анкладывать), либо же пнг (тот что 24), ессно тоже с прозрачностями
    Ну и далеее дофига вариантов:
    От того чтобы картинку и над ней див рисовать, кончая тем, что втыкать на бэкграунд картинку, а как имейдж пихать эту самую фишку сверху... 8)
    Короче вариантов там тьма...

  3. #3

    Регистрация
    29.01.2005
    Адрес
    Одесса
    Сообщений
    1,020
    позиционируешь картинки абсолютно, так как нужно чтобы они накладывались, ставишь им разное значение z-index... например той, что должна быть ниже: z-index:1; а которая выше - соответсвенно 2.

  4. #4

    Регистрация
    19.11.2003
    Адрес
    Moscow
    Сообщений
    63
    про бэкграунды и картинки понятно..

    От того чтобы картинку и над ней див рисовать
    Live
    а подробнее можно?

  5. #5

    Регистрация
    29.01.2005
    Адрес
    Одесса
    Сообщений
    1,020
    Ital, дай более подробно информацию о том, что нужно сделать. Я напишу как бы я сверстал.

  6. #6

    Регистрация
    19.11.2003
    Адрес
    Moscow
    Сообщений
    63
    вобщем есть картинка ввиде схемы.. нужно сверху накладывать рамочки, которые бы соединяли определенные фрагменты..

  7. #7

    Регистрация
    08.03.2005
    Адрес
    этих
    Сообщений
    275
    1. <div style="width: 1%;">
    2. <div style="position:absolute;">
    3. [img]orver.gif[/img]
    4. </div>
    5. [img]under.jpg[/img]
    6. </div>

    Соответственно:
    1 строчка. Впринципе не обязательна... НО она не даст разъехаться всей это контрукции... При желании можно поставить и display: inline; конструкция не порушится.
    2 строчка. Делаем еще один див и выстраиваем ешл "поверх" того что будет ниже... то есть ставим позиционированние - абсолютное, можно указать z-index - но это вроде не обязательно. А так же, если нужно сдвинуть эту самую картинку, которая будет поверх картинки снизу - то можем дописать в стиль: margin-***: NNNpx; где NNN - число, а *** - top, right,left,bottom. Так же отступы можно задавать со всех сторон одинаковый через margin: NNpx; или же везде разный через тот же margin: NNpx NNpx NNpx NNpx; то есть TOP RIGHT BOTTOM LEFT.
    3 строчка. Вставляем в этот самый див, котороый будет поверх артинки саму картинку, которая будет над той что снизу
    4 строчка. Закрываем див
    5. Вставляем картинку, которая будет ПОД дивом
    6. Закрываем последний див...

    Вот и всё
    Удачи

  8. #8

    Регистрация
    19.11.2003
    Адрес
    Moscow
    Сообщений
    63
    2GoDoom
    о, супер!
    большое спасибо!

Похожие темы

  1. наложение объекта по форме
    от uffffff в разделе Векторная графика
    Ответов: 0
    Последнее сообщение: 11.07.2010, 21:24
  2. Наложение div на flash
    от zwolf в разделе Flash-технологии
    Ответов: 2
    Последнее сообщение: 28.04.2008, 22:24
  3. Наложение текстуры волос на растительность
    от lightseed в разделе Растровая графика
    Ответов: 4
    Последнее сообщение: 05.07.2006, 01:04
  4. Наложение текстур или как правильно...
    от йать в разделе Растровая графика
    Ответов: 7
    Последнее сообщение: 12.04.2006, 02:53
  5. Наложение слоев в CSS (код без позиционирования)
    от designuser в разделе Вёрстка сайта
    Ответов: 11
    Последнее сообщение: 27.07.2005, 11:16

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •