Наложение картинки на картинку CSS.

наложение картинки CSS
Здравствуйте, мои постоянные читатели и гости блога. Давно ничего не мастерили с картинками. Предлагаю сделать сегодня наложение картинки на картинку. Нам для этого не понадобятся сторонние фото - редакторы. Очень удобно для тех, кто не владеет фотошопом. С помощью простого кода CSS наложим картинку на картинку.
В шпаргалке эффект анимации картинки CSS этот вариант был затронут. Там мы добавили ещё свойство webkit-transition, чем и заставили полетать бабочку. Сегодня всё будет проще - без полётов. Посмотрите здесь на то, что я предлагаю вам сделать. По моему, красиво.

Для реализации нам понадобится основная фоновая картинка и картинка которую будем накладывать на основную. В первом, где летают бабочки на полянке, картинка фон в формате JPEG, а наложенная (бабочки) - в формате GIF.

Код.
<style>
.izo1 {border: 3px solid #009933 ; /*цвет и толщина рамки*/
  background: url( адрес фоновой картинки )no-repeat;
  width: 512px; /*ширина блока*/
  height: 300px; /*высота блока*/
}</style>

<br />
<div class="izo1">
<div style="margin: 40px 320px;">
<img border="0" src="адрес второй картинки " /></div>
</div>
Для корректного наложения второй картинки меняйте отступы margin: 40px 320px; как вам нужно. Естественно, вторая картинка должна быть меньших размеров, чем первая. Размеры фоновой картинки указаны в коде. Тут тоже всё на ваше усмотрение.

Неплохо смотрится и такой эффект (второе изображение на тестовом блоге).

наложение картинки на картинку

Можно вставить своё фото на фоне моря, гор, пустыни или другой красоты. В этом случае используем тот же код. Картинку, которая сверху в формате PNG. Подбирайте для такого варианта изображение одинакового размера или второе немного меньше.

Мне пришлось подогнать размеры ширины и высоты до  width: 580px;/*ширина блока*/
 height: 318px;/*высота блока*/ , а расположение второго изображения так "margin: 10px 70px;">. Потренируйтесь.

Готовый код вставляем в редакторе сообщений, перейдя в режим HTML, в нужном месте.

Красота, да и только. Вот так и справились с наложением картинки на картинку. Если возникнут затруднения пишите в комментариях. Или поделитесь готовым результатом, если применили у себя. Обязательно загляну посмотреть.

Сегодня у меня всё. Примите мои поздравления в канун Великой  Пасхи!

p.s. поздравление сделано вышеописанным способом.


здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


8 комментариев:

  1. Виктория! Поздравляю Вас с 1 Мая и со Светлым Христовым Воскресением!

    ОтветитьУдалить
    Ответы
    1. Спасибо, Ирина. И Вас тоже со всеми грядущими праздниками.

      Удалить
  2. И я присоединяюсь к поздравлениям!
    Ох, для меня все эти коды - лес дремучий :( А уж работа с картинками - вообще высший пилотаж :)

    ОтветитьУдалить
    Ответы
    1. Олли, а тебе зачем этим заморачиваться, у тебя муж программист. Спасибо за пожелания.

      Удалить
  3. Думаю, пригодиться, интересные эффекты, я все никак не попробую текст или ссылки на фон добавлять, помню у тебя было такое. Вот сегодня мне бы пригодилась такая табличка с кликабельным текстом.;) Пока вырезала у тебя, как картинку, надеюсь руки дойдут, или ноги), переделать.
    С праздниками, хороших выходных!

    ОтветитьУдалить
    Ответы
    1. Олеся, я не совсем поняла про какую табличку с кликабельным текстом ты говоришь. Тебя и семью тоже со всеми наступающими.

      Удалить
  4. Вика. С праздником Вас и всех ваших близких. Всех благ!

    ОтветитьУдалить
  5. Спасибо, Любовь. И Вас с праздником.

    ОтветитьУдалить

Пользовательский поиск