Наслагване на изображение върху изображение чрез CSS
.jpg)
четвъртък
Здравейте, моите редовни читатели и гости на блога. Предлагам днес да наложим две изображения едно върху друго. За това не се нуждаем от редактори на изображения от трети страни. Много удобен начин за тези от вас, които не владеят Photoshop.
С помощта на CSS код ние ще препокрием първото изображение с друго. Вижте какво ви предлагам.
➤Първо изображение, което е фоново:
➤Второ изображение, което ще наложим върху първото:
➤И получаваме това:
По мое мнение се получава красиво.
За да приложим този метод за наслагване на изображения едно върху друго се нуждаем от:
➤две изображения, които ще подберете по ваш вкус;
➤и този CSS код;
Уточнения
➤За да наложите второто изображение правилно, променете margin: 40px 320px; както ви е нужно. За начинаещите блогъри припомням една моя публикация;
➤Естествено, второто изображение трябва да е по-малко от първото;
➤Размерът на фоновото изображение е посочен в кода. И тук всичко е по ваша преценка;
➤Можете да поставите изображението си на фона на морето, планината, пустинята или друга красива местност. Потренирайте;
➤Впишете готовия код в редактора на публикацията в HTML режим на желаното място;
➤Ако срещнете някакви трудности напишете в коментарите. Или споделете готовия краен резултат, ако сте го приложили в блога си;
Приемете моите поздравления в навечерието на Великден!
P.S Моят поздрав е реализиран по посочения по-горе способ.
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
С помощта на 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>
.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 Моят поздрав е реализиран по посочения по-горе способ.
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
Здраве за всички вас! Не забравяйте да правите добро на други хора!
