![Наслагване на изображение върху изображение чрез CSS изображение върху изображение](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio2c9oj7z_KtVQiijJ8QF3darWwdSmUxrYIQhKG-0htOz1w03c_VnL0qMnCCFtFc2HrhUwbp1TyUl-EIgCup7qB7srjATuTOLoldOIM3msMcAHuH9amVoBMyO6ZpGk8Rd2ACVyM5CwFCQ/s1600/opit1-min.png)
С помощта на CSS код ние ще препокрием първото изображение с друго. Вижте какво ви предлагам.
➤Първо изображение, което е фоново:
![Първо изображение, което е фоново. Първо изображение](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiehsNfecfsQTwF26FSQtB_wE_xWykiAORDbSP34Gc7tXhZz9QYZG_UU94WOMnWh_bxL06YLNs4lRXsEKX0vIUylSQJm_BLs1hnSg-4CrG_mSyN3l-IujpPU7lUCd-W5pxQFZV9RA6es6k/s400/palma-more-plyazh-pesok-oblaka1-min.jpg)
➤Второ изображение, което ще наложим върху първото:
![Второ изображение Второ изображение](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE9-82tKRJ9EwZ2KVn4KkmfBvkL8gXRiif5uD9QfulJXT_i3k0pWP0EbrjgWKPwmVhR8m2I76QBEUfiOM_l50YIv2FlG_IkEbcPEpDN1tOiIfxs4XPZASJe9AFL8G70zetNfvlSqkUq6E/s320/0_566d7_3b48cbaa_L-min.png)
➤И получаваме това:
![Краен резултат от способа. Краен резултат](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUDIpz8beG8yMSq6_so2NbuseSV2Vg8zCwfibg-2sscWsLX5V2O0abZNpgtns2B1fJCzq0-6t9GqfvMCFZw_Yr4zffZtmIofVgtc6C9Nb7_XGiCjCxIaomt3nEiWBBgMVDOfTSyDNFqgw/s640/opit.jpg)
По мое мнение се получава красиво.
За да приложим този метод за наслагване на изображения едно върху друго се нуждаем от:
➤две изображения, които ще подберете по ваш вкус;
➤и този 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 режим на желаното място;
➤Ако срещнете някакви трудности напишете в коментарите. Или споделете готовия краен резултат, ако сте го приложили в блога си;
Приемете моите поздравления в навечерието на Великден!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiDePLqdrI1FCzqLF-w0jq2RTWTZKiEHnW7D1s_uTMqI12lBGUweYZurFchz3uOVbTxKw90LgFdELmPyAndC4CfBPqWP1cF9mHmKxKAVrfcTkJqhrIzlLJTTDpGZUkKNavpArS0HxWjiI/h120/s12591.gif)
P.S Моят поздрав е реализиран по посочения по-горе способ.
Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на:
![Посетете .: BGtop.net :. Топ класацията на българските сайтове и гласувайте за този сайт! BGtop](http://bgtop.net/images/bgtop8831.gif)
Здраве за всички вас! Не забравяйте да правите добро на други хора!
Благодаря за интересния урок.
ОтговорИзтриванеБлагодаря за отзива и ще помогна, ако трябва.
Изтриване