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

По различным причинам, которые мы сейчас не будем касаться и разбирать ... Но, вдруг человеку срочно понадобилось наложить картинку на картинку или текст на картинку, чтобы быстро и визуально оценить, как это будет смотреться ? ...

Попытался использовать для этих целей Microsoft Word - но, тот замычал что-то невразумительное про режим ограниченной функциональности и невозможность наложить графический Art - текст на картинку ...

Я помню, что пытался делать подобные вещи еще в HTML3 ... Попытался использовать для поиска интернет - но тот выдал такой спам / избыточный код, что он мне ни в какое место не упирался ... Ребята, мы же не на Dreamviewer сайт для правительства генерим ... Нам нужен простой, легкий и удобный метод быстро наложить картинку на картинку и оценить полученный результат ... Пусть, даже используя HTML и CSS (ну, куда без них?) ...

Например, мы живем в деревне и хотели бы построить домик ... Хочется представить себе как он будет выглядеть на местности и вообще впишется в нашу концепцию будущего строительства ... Для этого у нас есть две картинки / фотографии, которые надо сложить вместе, вернее наложить одну на другую - и посмотреть / оценить, что получится, если ...

Это участок в деревне, который можно купить для сада / огорода, строительства дома / летней фазенды. Это быстро / монтируемый садово / дачный домик, который нам предложили купить и смонтировать.

Для работы потребуется простой каркас HTML документа, SRC пути картинок и CSS стили - позиционирование / наложение картинки на картинку с элементом прозрачности верхнего слоя, чтобы через него было видно нижний слой :
<html>
<head></head>
<body>

<img src="overlay-pic-html-1.jpg"
style="position: absolute; top: 15px; left: 15px;">

<img src="overlay-pic-html-2.jpg"
style=" position: absolute; top: 15px; left: 15px; opacity: 0.5;">

</body>
</html>

Получилось не что иное, как слоеный пирожок в HTML / CSS стиле ... Прозрачность можно регулировать, изменяя значение opacity от 0.00 (прозрачно) до 1.00 (непрозрачно) ... Для старых браузеров рекомендуется применять фильтр filter : alpha(opacity=50) ... На мой взгляд - это самый простейший способ / прием быстро наложить картинку на картинку и через несколько минут увидеть результат, особо не тренируя себе голову ... Самое время посмотреть, какое изображение получилось методом наложения ...

Если вам интересно, то, конечно я немного вздрогнул внедряя код накладываемых изображений в код этой страницы - и поэтому применил необходимые изменения для соосности взаиморасположения объектов : div - relative, чтобы DIV не уехал из формата страницы, первый img absolute относительно положения DIV, второй img relative относительно первого IMG ... Это следствие наследования в HTML свойств родительских элементов - дочерними ... Но, приведенного в примере кода - это не касается ...

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

Кстати - совсем не стоит переживать по поводу падения качества в результате наложения изображения одного на другое - достаточно воспользоваться автоисправлением качества картинки онлайн сервисом / редактором изображений pixlr express ... Дя этого достоточно отскриншотить с экрана результат наложения картинки на картинку, сохранить в новом файле, загрузить в онлайн редактор и применить метод авто / исправления качества картинки ...

Не знаете как быстро сделать скриншот ? Просто нажмите одновременно клавишу клавиатуры со значком Windows и клавишу Prt Sc (Print Screen, переводится как печать экрана) ... Экран в виде графического захвата изображения скопируется в буфер обмена, и это изображение можно вставить например в стандартный редактор рисунков MSPaint, обрезать ненужные края (передвинув картинку вверх и влево - и передвинуть границы рисунка снизу / вверх и справа / налево) и сохранить, например в формат JPG... После авто / исправления в онлайн фото / редакторе pixlr express рисунок вернет немного резкости и яркости / сочности цветов и красок ...

Исправление потери цветов в результате наложения рисунков в онлайн фото / редакторе pixlr express.

12:44 26.05.2019

Поделиться ссылкой :

Быстрый поиск по сайту :


Главная страница сайта.

Меню сайта - главные разделы.

= = = Меню раздела = = =


© techstop-ekb.ru / Екатеринбург / 2019