Картинки две в одной,как вставить

Как с помощью CSS вставить одну картинку в другую и при этом не пользоваться программой фотошоп. Фото-эффекты онлайн бесплатно на CSS для установки изображений и картинок в статью на блог или сайт.Сделать фото с различными эффектами при создании веб-страниц в принципе не сложно. Всё что от вас потребуется это просто загрузить нужные вам фото и заключить в теги следующего вида.

Эффекты для фото и картинок на CSS

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

Код CSS для фото-эффектов.

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

<style>
.vgol {border: 1px solid #ddd;/*цвет и толщина рамки*/
  background: url(Урл картинки фона)no-repeat;
  width: 600px;/*ширина блока*/
  height: 320px;/*высота блока*/
}</style>

Далее идёт контейнер или блок куда следует вписать адрес вашего загруженного фото,после обработки в фотошопе. Свойство  margin: 10px 70px; позволяет позиционировать добавленное изображение и изменяя значения можно добиться корректного положения относительно фона.

<div class="vgol">
<div style="margin: 10px 70px;opacity: 1;">
<img border="0" src="Урл фото или другой картинки" /></div></div>

Второй вариант это тот же вариант,что и пред идущий просто изменено значение opacity: 1;  с единицы на 0.3. Наиболее оптимального отображения картинки можно добиться воспользовавшись визуальным онлайн редактором для проверки и настройки НТМЛ-кода и различных скриптов.

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

<style type="text/css"> @keyframes circle {     from { transform:scale(0.1) rotate(0deg); }     to { transform:scale(1.1)rotate(480deg); } } @keyframes inner-circle {     from { transform:scale(0.1) rotate(0deg); }     to { transform:scale(1.1) rotate(-480deg); } } .golru {     width:1px;     height:0px;     margin: 20px auto 0;       line-height:1;     animation: circle 20s linear infinite;     transform-origin:50% 180px; } .golru{     animation: inner-circle 25s linear infinite; } </style>

Смотреть ещё

Установка происходит также,как и первом варианте на страницу,где планируется показ только теперь к блоку следует добавить ещё один контейнер следующего вида,который размещается на месте показа фото на странице согласно содержимого.Настройки внесены в CSS-код  и если потребуется можно изменять их по своему усмотрению.

<div class="vgol"><div class="golru">
<img  border="0"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF5hjhoWiiOfM2ZERRoJhb3eYmcdWTo_FcWtNTdfb92L_s-P17v9ROv635wD1XIGlNeLI5EWpkKbZS8VqHqx5X0bcENJLRGbgHHMndiXH0vgVvNIUBUbEklnw1eonmf8nJn3XhLMC6Ezdr/s1600/v-gol.ru_baterf.gif"/>
</div></div>