Как сделать на заднем фоне картинку

0

Как сделать картинку фоном в HTML и CSS. 3 простых способа

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

• Покрывается 100% ширины и высоты страницы
• Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
• Сохраняются пропорции картинки (aspect ratio)
• Изображение центрировано на странице
• Фон не вызывает скроллов
• Решение максимально кроссбраузерное
• Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.

Этот способ работает в:

• Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
• IE 9+

Способ 3

Еще один способ заключается в следующем: фиксируем изображение <img /> к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в <div />, который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.

Этот способ работает в хороших браузерах и IE 8+.

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

Как поменять фон у фотографии, картинки — только простые способы!

Д оброго дня!

Наверное, многие видели фото, на которых запечатлено что-то невероятное: например, ваш друг стоит рядом с извергающимся вулканом, сидит на крыле самолета, или жмет руку президенту. 👀

Как вы понимаете, подобные фотографии «не настоящие»: просто были «совмещены» несколько снимков между собой.

Сделать подобные штуки с современными программами не так уж и сложно. Достаточно взять фото, вырезать из него определенный объект (например, какой-то предмет или нужного человека) , и поместить его на другой фон. Такая вот замена фона позволяет творить чудеса, создавать самые удивительные и интересные изображения!

Кстати, подобная операция может пригодится и для восстановления неудачных фото (когда, что-то попало «не нужное» на задний план).

Собственно, в этой заметке предложу несколько простых вариантов, как можно провернуть подобную «замену». 👌

Теперь ближе к теме.

📌 Рекомендация!

Чем лучше смотреть картинки в Windows: программы для просмотра изображений и фото

Замена фона: простые способы

👉 Способ №1: использование редакторов фото для начинающих

Если вы не собираетесь профессионально работать с графикой, то со всем не обязательно «возиться» с большими и сложными редакторами.

Сейчас достаточно программ для начинающих, которые в несколько кликов мышкой позволяют выполнить все самые необходимые операции с изображением (в том числе и заменить фон). Одна из таких — «Фото-Мастер».

Фото-Мастер

Простой графический редактор для начинающих пользователей. Все действия в программе выполняются по шагам (что очень удобно!). Редактор полностью на русском языке, с подсказками. Работает во всех современных ОС Windows 7/8/10.

Ниже рассмотрю в нем все действия для смены фона на фотографии.

1) Установку редактора опускаю (она стандартна). После запуска программы — первым делом откройте нужную фотографию ( «Файл/открыть фото» , см. скрин ниже 👉).

Открыть фото (Фото-Мастер)

2) Далее перейдите во вкладку «Инструменты» и кликните по вкладке «Замена фона» (справа в меню).

Инструменты — замена фона

3) Важный момент : выберите зеленую кисть («Объект») и укажите того человека (животное, предмет и т.д.), которого вы хотите оставить на фото.

Примечание : совсем не обязательно обводить полностью весь объект.

Достаточно поставить на нем несколько точек. В своем примере я просто поставить точку на каждой части тела: голова, туловище, руки, ноги.

Отмечаем объект, который нужно оставить

4) Теперь выберите инструмент «Фон» (красная кисть) и поставьте точки на фоне (т.е. на том, что вы хотите удалить).

В моем примере это было море, которое программа удалила автоматически (практически сразу же после того, как была поставлена первая точка).

Отмечаем фон, который нужно удалить

5) Если программа удалила что-то лишнее (все-таки работает-то автоматически), вы можете кистью подправить и восстановить нужный объект.

Вообще, в большинстве случаев, этот шаг можно пропустить, т.к. программа обычно достаточно точно определяет границы (на качественных фото) .

Можно подправить, если было удалено лишнее

6) Далее выберите новую фоновую картинку (фон можно оставить прозрачным или залить однотонным цветом), и измените размер объекта (если нужно).

Также рекомендую обратить внимание на инструмент «Адаптация цветов к фону» , «Размытие» и «Границы» . Регулируя эти параметры — можно добиться того, что объект будет того же оттенка, что и фон за ним.

Настраиваем объект на новом фоне

7) Кстати, не могу не отметить, что в «Фото-Мастер» есть достаточно большое количество эффектов: фотографии можно придать яркости, усилить какие-нибудь оттенки, или сделать ее вообще черно-белой.

Придание эффекта и сохранение

В общем-то, на этом все — осталось только сохранить новое фото. ✌

Picverse

Picverse — еще один редактор фотографий с элементами искусственного интеллекта. Всего за несколько кликов мышкой — можно быстро преобразить фото до неузнаваемости!

Посмотрите, например, как мне удалось быстро отреставрировать фото к 9 мая! Разумеется, Picverse умеет «химичить» и с фоном — ниже я покажу простой пример такой работы.

Сайт Movavi / загрузка фото-редактора

Шаг 1

Установка программы стандартная (на этом не останавливаюсь). Далее нужно открыть картинку (Ctrl+O), перейти в раздел «Замена фона» , пометить зеленой кистью (с «плюсом») те области, которые вам нужны!

Шаг 1 — выделяем то, что нужно // Movavi Picverse

Шаг 2

Далее следует выбрать красную кисть (с минусом: «-«) и указать те области, которые вам не нужны. См. пример ниже. 👇

Шаг 2 — выделяем другой кистью то, что ненужно!

Шаг 3

Обратите внимание на мелкие детали: их можно доработать аналогичным образом. Когда вы выделяете те или иные участки красными и зелеными кистями — программа корректирует выделение. Разумеется, размер кисти можно изменять. 👇

Шаг 3 — дорабатываем мелкие детали

Шаг 4

После нажимаем на кнопку «Следующий шаг» . При необходимости можно уточнить края (но если в предыдущем шаге были выделены в том числе и мелкие детали — это не потребуется).

Шаг 4 — следующий шаг

Шаг 5

Теперь осталось только: либо добавить новый фон-картинку (как в моем случае 👇), либо просто сохранить картинку с прозрачным фоном.

Шаг 5 — Добавляем новый фон

Шаг 6

При необходимости Picverse позволяет обработать фото несколькими довольно интересными фильтрами. Можно существенно оживить краски и придать картинке неповторимую игру переходов.

Шаг 6 — применяем эффекты и сохраняем картинку

Способ №2: использование онлайн-сервисов

Их преимущество в том, что для работы вам ненужно ничего устанавливать (правда в этом их и минус — придется загружать личные фото на какой-то сторонний сервис, что не всегда хотелось бы. ).

К тому же, их функциональность и качество работы заметно ниже, чем у многих редакторов (особенно, это заметно при обработке больших фото).

Но тем не менее, если вам нужно изменить совсем небольшую картинку — то вариант вполне рабочий. Тем более, если вы хотите это сделать со смартфона.

На мой взгляд — один из лучших сервисов для начинающих (хоть и на английском). Для начала работы — перейдите по ссылке выше, и кликните по меню «Choose a photo» (выбор фото). 👇

Далее сервис автоматически распознает, где на фотографии объект, а где фон. В моем случае он быстро «нашел» девушку на фото и удалил фон за ней (правда, частично удалил и ее туловище. ). Чтобы исправить это — просто кликните по инструменту «Touch up» .

После выберите зеленую кисть и вручную обведите то место, которое нужно восстановить. Кстати, если выберите красную кисть — то можно выполнить обратную операцию (т.е. удалить те места, которые не нужны).

Когда удалите/добавите всё, что нужно — нажмите по кнопке «Finish» в углу экрана.

Где удалено лишнее — используйте зеленую кисть

Далее нажмите на инструмент «Replace background» (заменить фон). 👇

После чего либо загрузите свою картинку в качестве нового фона, либо выберите одну из базы. Пример на скрине ниже (для загрузки полученного изображения — нажмите на кнопку «Download»).

Загружаем готовую картинку

Во многом похож на предыдущий сервис (разве побольше опций, и обработка фото идет в ручном режиме, а не автоматически).

Для начала работы с ним — просто перейдите по вышеприведенной ссылке, и нажмите на кнопку «Upload Image» (загрузить изображение).

Затем при помощи зеленой и красной кистей укажите объект и фон (см. пример ниже).

Указание объекта и фона

Далее сервис оставит то, что вы выделили зеленым (см. пример ниже). После чего обратите внимание на меню справа: в разделе «Background» (фон) выберите инструмент «Image» (изображение) и нажмите по кнопке «Select Image» (выбор картинки) .

Выбор нового фона

Последнее действие — сохранить полученное изображение (для этого просто кликните по кнопке с дискеткой в правом углу экрана. ).

Меняем задний фон на фото в Фотошопе

К замене фона при работе в редакторе Фотошоп прибегают очень часто. Большинство студийных фото делаются на однотонном фоне с тенями, а для составления художественной композиции требуется другой, более выразительный фон. В сегодняшнем уроке будет рассказано, как поменять фон в Фотошопе CS6.

Замена фона

Замена фона на фото происходит в несколько этапов.

• Отделение модели от старого фона;
• Перенос вырезанной модели на новый фон;
• Создание реалистичной тени;
• Цветокоррекция, придание композиции завершенности и реалистичности;

Исходные материалы

Шаг 1: Отделение модели от фона

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

Настоятельно рекомендуем изучить данные материалы, поскольку без этих навыков Вы не сможете эффективно работать в Фотошопе. Итак, после прочтения статей и недолгих тренировок мы отделили модель от фона:

Теперь необходимо перенести ее на новый фон.

Шаг 2: Перенос модели на новый фон

Перенести изображение на новый фон можно двумя способами.

Первый и самый простой – перетянуть фон на документ с моделью, а затем поместить его под слой с вырезанным изображением. Если фон больше или меньше холста, необходимо подогнать его размеры при помощи Свободного трансформирования (CTRL+T).

Второй способ подойдет, если Вы уже открыли изображение с фоном для того чтобы, например, отредактировать. В этом случае необходимо перетянуть слой с вырезанной моделью на вкладку документа с фоном. После непродолжительного ожидания документ откроется, и слой можно будет поместить на холст. Все это время кнопку мыши нужно держать зажатой.

Размеры и положение также подгоняются при помощи Свободного трансформирования (CTRL+T) с зажатой клавишей SHIFT для сохранения пропорций.

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

Шаг 3: Создание тени от модели

При помещении модели на новый фон она как бы «повисает» в воздухе. Для реалистичности картинки нужно создать тень от модели на нашем импровизированном полу.

1. Нам понадобится исходный снимок. Его необходимо перетянуть на наш документ и поместить под слой с вырезанной моделью.
2. Затем слой нужно обесцветить сочетанием клавиш CTRL+SHIFT+U, после чего применить корректирующий слой «Уровни».

Должен получиться примерно такой результат:

Настраиваем ее так: мягкая круглая,

Некоторый белые участки останутся, поскольку их проблематично будет удалить, но это мы исправим следующим действием.

Шаг 4: Завершающие штрихи

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

Перейдем на верхний слой и создадим корректирующий слой «Цветовой тон/Насыщенность».

Во-вторых, фон слишком яркий и контрастный, что отвлекает взгляд зрителя от модели.

Перейдем на слой с фоном и применим фильтр «Размытие по Гауссу», тем самым немного размыв его.

Сделать фон в Фотошопе темнее можно, выгнув кривую вниз.

В-третьих, брюки модели слишком затенены, что лишает их деталей.

Переходим на самый верхний слой (это «Цветовой тон/Насыщенность») и применяем «Кривые». Кривую выгибаем вверх до тех пор, пока не появятся детали на брюках. На остальные части картинки не смотрим, так как следующим действие мы оставим эффект только там, где нужно. Не забываем про кнопку привязки.

Маска зальется черным цветом, а эффект пропадет.

Еще раз посмотрим на изображение:

Заключительным штрихом (в нашем случае, вы же можете продолжать обработку) будет легкое усиление контрастности на модели. Для этого создадим еще один слой с кривыми (поверх всех слоев), привяжем его, и потянем ползунки к центру. Следим, чтобы детали, которые мы открывали на брюках, не пропали в тени.

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

CSS и множественный фон

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

В этом материале я подробно расскажу о свойстве background-image , приведу наглядные примеры совместного использования нескольких фоновых изображений элемента, рассмотрю сильные стороны такого подхода. Здесь будет много иллюстраций.

Если вы не знакомы с CSS-свойством background — хорошо будет, если вы, перед чтением материала, заглянете на эту страницу документации MDN, посвящённую данному свойству.

Введение

CSS-свойство background — это сокращённое свойство, которое позволяет настраивать следующие обычные свойства элементов:

• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• background-attachment

Рассмотрим следующий пример:

Начальная позиция фонового изображения находится в верхнем левом углу элемента. Размер изображения составляет 50px * 50px . При настройке свойства background важно помнить о порядке следования свойств, задающих позицию и размер фонового изображения.

Путь к изображению, его позиция и его размер

На предыдущем рисунке за значениями, относящимися к настройке свойства background-position , идут значения свойства background-size . Если разместить эти значения в другом порядке, мы получим неправильно оформленный CSS-код. Например — такой:

Позиция фонового изображения

Для настройки области расположения фона, исходной позиции фонового изображения, используется свойство background-origin . Мне нравится та гибкость, которую даёт свойство background-position . Оно позволяет позиционировать фон элементов разными способами:

• Ключевые слова ( top , right , bottom , left , center ).
• Процентные значения. Например: 50% .
• Значения, задающие некие расстояния. Например: 20px 2.5rem .
• Значения, представляющие собой отступы от краёв элемента. Например: top 20px left 10px .

Система координат

Начало системы координат, используемой при позиционировании фоновых изображений, находится в левом верхнем углу элемента. Начальным значением свойства background-position является 0% 0% .

Стоит отметить то, что значение top left — это то же самое, что и значение left top . Браузер достаточно интеллектуален для того чтобы определить то, какая часть этого значения относится к оси X, а какая — к оси Y.

Конструкции вида top left и left top равнозначны

Размер фонового изображения

Имя свойства, задающего размер фонового изображения, background-size , однозначно указывает на роль этого свойства. Размер фонового изображения — это его ширина и высота. При настройке этого свойства нужно учитывать то, что первое значение представляет ширину, а второе — высоту.

Сначала идёт ширина, а потом — высота

Если ширина и высота фонового изображения являются одинаковыми, это значит, что у нас нет необходимости указывать два значения для background-size . В такой ситуации достаточно указать одно значение.

Тут, кстати, нелишним будет упомянуть о том, что в спецификации CSS по этому поводу сказано следующее: «Если указано лишь одно значение, то предполагается, что второе значение — это auto». Но этот механизм в браузерах не реализован, хотя в будущем ситуация может измениться. Благодарю Илью Стрельцына за то, что привлёк моё внимание к этой детали.

Одно значение задаёт и ширину, и высоту

Теперь, когда мы поговорили об основах использования свойства background , давайте поговорим о том, как работать с несколькими фонами.

Множественный фон

В свойстве background может быть описан один слой фона, до сих пор мы видели именно такие описания, или — несколько слоёв, свойства которых разделены запятой. Если размеры нескольких фоновых изображений одинаковы, одно из них полностью перекроет другие.

Использование нескольких фоновых изображений

На вышеприведённом рисунке у элемента есть два слоя фоновых изображений. Каждое из этих изображений позиционировано по-своему. Это — простейший пример использования множественного фона. А теперь давайте рассмотрим более продвинутый пример.

Порядок наложения фоновых изображений друг на друга

При оснащении элемента несколькими фоновыми изображения, в том случае, если одно из них занимает всю ширину и высоту родительского элемента, важное значение приобретает порядок наложения фонов друг на друга. Принять решение о том, в каком порядке фоны должны накладываться друг на друга, может быть не особенно просто. Рассмотрим следующий пример.

Здесь у нас имеется изображение стола ( table.jpg ) и изображение тарелки ( konafa.svg ). Как вы думаете, какое из этих фоновых изображений будет выведено первым? Изображение стола или изображение тарелки?

Элемент с двумя фоновыми изображениями

Правильный ответ на этот вопрос заключается в том, что первым будет изображение стола. В CSS фон, описанный первым, накладывается на второй фон, второй фон накладывается на третий и так далее. Изменение порядка описания фонов влияет на их вывод в элементе.

Первый фон накладывается на второй

Как видите, фон, заданный первым, находится выше фона, заданного вторым.

Сплошные цвета

Предположим, нам, используя CSS-инструменты настройки фона элемента, нужно сформировать одноцветный фон. Как это сделать? Это, благодаря CSS-градиентам, совсем несложная задача. Дело в том, что если воспользоваться функцией linear-gradient с одинаковыми стоп-цветами, это приведёт к появлению сплошного цвета.

Фон, созданный с помощью linear-gradient и одинаковых стоп-цветов

Тут мы привели простейший пример использования градиента при настройке фона, но градиенты, на самом деле, можно использовать для создания очень интересных и полезных эффектов.

Сценарии использования и практические примеры

▍Затемнение фонового изображения

Часто, ради облегчения чтения текста верхнего раздела страницы, фоновое изображение этого раздела нужно затемнить. Это несложно сделать, воспользовавшись двумя фоновыми изображениями.

Затемнённое фоновое изображение

Ещё интереснее то, что тот же метод можно использовать для тонирования фонового изображения элементов.

Тонированный фон

▍Рисование средствами CSS

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

Изображение ноутбука

Давайте разберём это изображение и подумаем о том, какие градиенты нам понадобятся.

Пластиковая рамка дисплея, LCD-дисплей, отражение, скруглённые края корпуса, корпус

Обратите внимание на то, что когда ноутбук «разобран», гораздо легче разобраться в том, какие градиенты нужны для того чтобы его нарисовать с использованием техники применения нескольких фоновых изображений. Возможно, вы заметили то, что я использовал пару окружностей, играющих роль скруглённых углов корпуса ноутбука. Дело в том, что стандартного способа создания градиентов со скруглёнными углами не существует.

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

Итак, градиенты мы описали и задали их размеры. Теперь поразмышляем над их позиционированием. Решение этой задачи облегчит схематичное изображение ноутбука, приведённое ниже.

Схематичное изображение ноутбука

Реализация отражения света от рамки дисплея ноутбука

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

Отражение света от рамки дисплея ноутбука

LCD-дисплей

Дисплей ноутбука выровнен по центру оси X, а по оси Y он расположен со сдвигом в 6 пикселей от начала координат.

Дисплей ноутбука

Рамка дисплея

Рамка находится ниже дисплея, она центрирована по оси X, по оси Y она расположена со смещением в 0px от начала координат.

Рамка дисплея

Корпус ноутбука

А это — самый интересный элемент. Для начала, надо учесть то, что элемент, представляющий корпус ноутбука, является прямоугольником, и то, что корпус имеет скруглённые края. Это достигается благодаря использованию пары окружностей.

Корпус ноутбука

Готовый рисунок

Вот CodePen-проект, с которым вы можете поэкспериментировать.

▍Смешивание нескольких фонов

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

Цветное изображение и вспомогательный слой чёрного цвета

Обратите внимание на то, что в следующем фрагменте CSS-кода используется свойство background-blend-mode: color . Именно оно и позволяет достичь нужного эффекта