Безплатен блог на платформата Blogger (blogspot). Създаване, водене, персонализиране, дизайн, притурки в примери. Препоръки и съвети за начинаещи и напреднали блогъри.

Търсене

Breaking

Наслагване на изображение върху изображение чрез CSS

изображение върху изображение
Здравейте, моите редовни читатели и гости на блога. Предлагам днес да наложим две изображения едно върху друго. За това не се нуждаем от редактори на изображения от трети страни. Много удобен начин за тези от вас, които не владеят Photoshop.
С помощта на CSS код ние ще препокрием първото изображение с друго. Вижте какво ви предлагам.

➤Първо изображение, което е фоново:

Първо изображение

➤Второ изображение, което ще наложим върху първото:

Второ изображение


➤И получаваме това:

Краен резултат

По мое мнение се получава красиво.

За да приложим този метод за наслагване на изображения едно върху друго се нуждаем от:

➤две изображения, които ще подберете по ваш вкус;

➤и този CSS код;

<div class="separator" style="clear: both; text-align: center;">
<a href="адрес на фоновото изображение " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" " border="0" height="223" src="адрес на второто изображение" title=" " width="400" /></a></div>
<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; както ви е нужно. За начинаещите блогъри припомням една моя публикация;

➤Естествено, второто изображение трябва да е по-малко от първото;

➤Размерът на фоновото изображение е посочен в кода. И тук всичко е по ваша преценка;

➤Можете да поставите изображението си на фона на морето, планината, пустинята или друга красива местност. Потренирайте;

➤Впишете готовия код в редактора на публикацията в HTML режим на желаното място;

➤Ако срещнете някакви трудности напишете в коментарите. Или споделете готовия краен резултат, ако сте го приложили в блога си;

Приемете моите поздравления в навечерието на Великден!


P.S Моят поздрав е реализиран по посочения по-горе способ.


Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:

BGtop

Здраве за всички вас! Не забравяйте да правите добро на други хора!

2 коментара:

  1. Лидия Петранова10:51

    Благодаря за интересния урок.

    ОтговорИзтриване
    Отговори
    1. Благодаря за отзива и ще помогна, ако трябва.

      Изтриване