Можно ли рисунок использовать вместо фона
Содержание статьи
Как сделать картинку фоном в HTML и CSS. 3 простых способа
Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).
Итак, требования к фоновому изображению у нас следующие:
- Покрывается 100% ширины и высоты страницы
- Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
- Сохраняются пропорции картинки (aspect ratio)
- Изображение центрировано на странице
- Фон не вызывает скроллов
- Решение максимально кроссбраузерное
- Не используются никакие другие технологии кроме CSS
Способ 1
На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size, которое мы применяем к тегу html. Именно html, а не body, т.к. его высота больше или равна высоте окна браузера.
Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover.
html {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Демо
Этот способ работает в
Chrome (любая версия)
Opera 10+
Firefox 3.6+
Safari 3+
IE 9+
Для того чтобы изображения загружались быстро, размещайте свои сайты только у проверенных хостинг-провайдеров, например, Beget.com
Пользователи и поисковые системы любят быстрые сайты.
Способ 2
Этот способ предусматривает использование элемента img, размер которого будет изменяться в зависимости от размера окна браузера. Чтобы растянуть изображение на весь экран, ему необходимо задать min-height и width со значением 100%. А чтобы изображение не сжималось до размера меньшего, чем оригинальный, установим min-width со значением равным ширине картинки.
В случае если ширина окна будет меньше ширины изображения, будет использоваться media query для выравнивания бэкграунда по центру.
<img src=»/images/background.jpg» class=»background» />img.background {
min-height: 100%;
min-width: 640px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
/* Зависит от размера изображения */
@media screen and (max-width: 640px){
img.bg {
left: 50%;
margin-left: -320px;
}
}
}
Демо
Этот способ работает в:
- Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
- IE 9+
Способ 3
Еще один способ заключается в следующем: фиксируем изображение <img /> к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.
Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в <div />, который мы делаем в 2 раза больше размера окна. А само изображение мы растягиваем и помещаем по центру.
<div class=»background»>
<img src=»/images/background.jpg» />
</div>div.background {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
Демо
Этот способ работает в хороших браузерах и IE 8+.
Надеюсь, эта информация будет для Вас полезной. Лично я частенько пользуюсь этими методами, особенно первым. Наверняка есть и другие способы поместить изображение на задний фон при помощи CSS. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.
Источник
Как изменить фон на фото
Июль 3, 2020
— Mimihack, Факты
Во время обработки изображений зачастую возникает необходимость заменить имеющийся фон, например, если в кадр попали нежелательные объекты. Некоторые предметы можно вырезать, но если их удаление не представляется возможным, проще изменить весь фон на фото. Как это сделать, расскажем в нашей статье.
Итак, для работы с изображениями сегодня используются различные приложения и онлайн-сервисы для компьютеров и смартфонов, в том числе айфонов. Перечислим несколько простых способов, позволяющих в считанные минуты изменить фотографии.
Photoshop
Photoshop на протяжении многих лет не теряет своей популярности у профессиональных фотографов и дизайнеров. Обусловлено это широким функционалом и возможностями, которые не могут предоставить другие программы. Работа в программе довольно трудоемкая и требует определенных навыков. Однако некоторые операции сможет выполнить даже новичок.
Итак, чтобы изменить фон фото в фотошопе, необходимо выполнить несколько простых шагов.
- После открытия фотографии необходимо выделить лишний фрагмент. Но для начала следует открепить слой с изображением. Для этого в панели «Слои» нужно два раза кликнуть по иконке с замком и в появившемся меню «Новый слой» подтвердить действие. Следующие этапы — выбор инструмента «Магнитное лассо» и выделение объектов, которые требуется удалить. Для удобства рекомендуется увеличить масштаб изображения. После выделения останется только нажать Delete.
- Следующий шаг — загрузка необходимого фона. На данном этапе так же открываем новое фото и открепляем слой.
- После этого необходимо переместить фото, служащее фоном, на первое фото. Для этого используем специальный инструмент перемещения. На панели справа необходимо перетянуть фоновый слой на первое изображение.
- Объединяем слои в панели справа и сохраняем картинку в нужном размере и формате.
Как мы видим, изменить фон на фото сзади с помощью фотошопа довольно просто, и справятся с этой задачей даже новички. Если же у вас нет под рукой данной программы, обратите внимание на другие приложения и онлайн-сервисы.
Snapseed
Полюбившееся всем приложение, с помощью которого можно с легкостью отредактировать изображение: обрезать снимок, добавить фильтры и эффекты, скорректировать экспозицию или изменить фон на фото в телефоне или на компьютере. Для замены необходимо выполнить несколько простых шагов.
- Открыть приложение и необходимое фото;
- Перейти во вкладку «Инструменты» и выбрать «Двойную экспозицию»;
- Открыть изображение, которое будет служить фоном, и выбрать режим наложения фона;
- Перейти в меню и выбрать «Посмотреть изменения»;
- В открывшемся окошке выбрать «двойную экспозицию» и нажать кнопку «Инверсия»;
- Выделить на новой маске слоя объекты исходного фото, которые вы решили поместить на новый фон;
- Сохранить и экспортировать изображение.
PiZap
PiZap — простой и функциональный онлайн-фоторедактор, который имеет широкие возможности для качественной обработки фотографий, в том числе изменения фона на фото. Итак, для редактирования фото на главной странице необходимо:
- нажать кнопку “Edit a photo” и загрузить фото с новым фоном;
- нажать иконку “Cut out”, выбрать “Custom» и “Next”;
- выбрать второе фото, объект которого вы хотите переместить на новый фон;
- на втором фото выделить объекты, щелкая мышкой вдоль их контура, и нажать ”Finish”;
- разместить выделенный объект на новом фоне и сохранить готовое изображение.
RemoveBG
Онлайн-сервис отличается от своих аналогов тем, что умеет работать в «умном» режиме. Пользователю достаточно загрузить изображения, и программа автоматически удалит фон. А для применения нового фона необходимо просто нажать “Select Photo” и выбрать новую картинку. Останется только сохранить полученный результат. Сервис, к сожалению, не имеет русской версии, однако его интерфейс настолько прост и понятен, что выполнить редактирование фото можно и без знания иностранного языка.
Pixlr
Pixlr — популярный фоторедактор, который представляет собой облегченную версию Photoshop. Широкий функционал позволяет создавать настоящие произведения фотоискусства. Чтобы изменить фон на фото, необходимо нажать “Open image from computer” и выбрать фотографии с новым фоном и объектом. Для выделения объекта используем инструмент «Лассо» (как и в Photoshop), копируем на новый слой и сохраняем полученный результат.
Сервисов для изменения фона на фото огромное множество. Не бойтесь экспериментировать и искать именно свой вариант, с помощью которого вы сможете делать настоящие фотошедевры и делиться ими с близкими, например, заказывая в Mimigram оригинальные подарки из фото.
Вам также могут понравиться
Источник
Как поменять фон на фото или картинке [простые способы]
Доброго дня!
Наверное, многие видели фото, на которых запечатлено что-то невероятное: например, ваш друг стоит рядом с извергающимся вулканом, сидит на крыле самолета, или жмет руку президенту. ????
Как вы понимаете, подобные фотографии «не настоящие»: просто были «совмещены» несколько снимков между собой.
Сделать подобные штуки с современными программами не так уж и сложно. Достаточно взять фото, вырезать из него определенный объект (например, какой-то предмет или нужного человека), и поместить его на другой фон. Такая вот замена фона позволяет творить чудеса, создавать самые удивительные и интересные изображения!
Кстати, подобная операция может пригодится и для восстановления неудачных фото (когда, что-то попало «не нужное» на задний план).
Собственно, в этой заметке предложу несколько простых вариантов, как можно провернуть подобную «замену». ????
Теперь ближе к теме…
*
???? Рекомендация!
Чем лучше смотреть картинки в Windows: программы для просмотра изображений и фото
*
Замена фона: простые способы
???? Способ №1: использование редакторов фото для начинающих
Если вы не собираетесь профессионально работать с графикой, то со всем не обязательно «возиться» с большими и сложными редакторами.
Сейчас достаточно программ для начинающих, которые в несколько кликов мышкой позволяют выполнить все самые необходимые операции с изображением (в том числе и заменить фон). Одна из таких — «Фото-Мастер».
*
Фото-Мастер
Официальный сайт: https://photo-master.com/
Простой графический редактор для начинающих пользователей. Все действия в программе выполняются по шагам (что очень удобно!). Редактор полностью на русском языке, с подсказками. Работает во всех современных ОС Windows 7/8/10.
*
Ниже рассмотрю в нем все действия для смены фона на фотографии.
1) Установку редактора опускаю (она стандартна). После запуска программы — первым делом откройте нужную фотографию («Файл/открыть фото», см. скрин ниже ????).
Открыть фото (Фото-Мастер)
2) Далее перейдите во вкладку «Инструменты» и кликните по вкладке «Замена фона» (справа в меню).
Инструменты — замена фона
3) Важный момент: выберите зеленую кисть («Объект») и укажите того человека (животное, предмет и т.д.), которого вы хотите оставить на фото.
Примечание: совсем не обязательно обводить полностью весь объект.
Достаточно поставить на нем несколько точек. В своем примере я просто поставить точку на каждой части тела: голова, туловище, руки, ноги…
4) Теперь выберите инструмент «Фон» (красная кисть) и поставьте точки на фоне (т.е. на том, что вы хотите удалить).
В моем примере это было море, которое программа удалила автоматически (практически сразу же после того, как была поставлена первая точка).
Отмечаем фон, который нужно удалить
5) Если программа удалила что-то лишнее (все-таки работает-то автоматически), вы можете кистью подправить и восстановить нужный объект.
Вообще, в большинстве случаев, этот шаг можно пропустить, т.к. программа обычно достаточно точно определяет границы (на качественных фото).
Можно подправить, если было удалено лишнее
6) Далее выберите новую фоновую картинку (фон можно оставить прозрачным или залить однотонным цветом), и измените размер объекта (если нужно).
Также рекомендую обратить внимание на инструмент «Адаптация цветов к фону», «Размытие» и «Границы». Регулируя эти параметры — можно добиться того, что объект будет того же оттенка, что и фон за ним.
Настраиваем объект на новом фоне
7) Кстати, не могу не отметить, что в «Фото-Мастер» есть достаточно большое количество эффектов: фотографии можно придать яркости, усилить какие-нибудь оттенки, или сделать ее вообще черно-белой.
Придание эффекта и сохранение
В общем-то, на этом все — осталось только сохранить новое фото… ✌
*
Способ №2: использование онлайн-сервисов
Их преимущество в том, что для работы вам ненужно ничего устанавливать (правда в этом их и минус — придется загружать личные фото на какой-то сторонний сервис, что не всегда хотелось бы…).
К тому же, их функциональность и качество работы заметно ниже, чем у многих редакторов (особенно, это заметно при обработке больших фото).
Но тем не менее, если вам нужно изменить совсем небольшую картинку — то вариант вполне рабочий. Тем более, если вы хотите это сделать со смартфона.
И так…
*
Сервис 1 — https://burner.bonanza.com/
На мой взгляд — один из лучших сервисов для начинающих (хоть и на английском). Для начала работы — перейдите по ссылке выше, и кликните по меню «Choose a photo» (выбор фото).
Выбор фото
Далее сервис автоматически распознает, где на фотографии объект, а где фон. В моем случае он быстро «нашел» девушку на фото и удалил фон за ней (правда, частично удалил и ее туловище…). Чтобы исправить это — просто кликните по инструменту «Touch up».
Доделаем вручную
После выберите зеленую кисть и вручную обведите то место, которое нужно восстановить. Кстати, если выберите красную кисть — то можно выполнить обратную операцию (т.е. удалить те места, которые не нужны).
Когда удалите/добавите всё, что нужно — нажмите по кнопке «Finish» в углу экрана.
Где удалено лишнее — используйте зеленую кисть
Далее нажмите на инструмент «Replace background» (заменить фон).
Заменяем фон
После чего либо загрузите свою картинку в качестве нового фона, либо выберите одну из базы. Пример на скрине ниже (для загрузки полученного изображения — нажмите на кнопку «Download»).
Загружаем готовую картинку
*
Сервис 2 — https://online.photoscissors.com/myimages
Во многом похож на предыдущий сервис (разве побольше опций, и обработка фото идет в ручном режиме, а не автоматически).
Для начала работы с ним — просто перейдите по вышеприведенной ссылке, и нажмите на кнопку «Upload Image» (загрузить изображение).
Загрузка картинки
Затем при помощи зеленой и красной кистей укажите объект и фон (см. пример ниже).
Указание объекта и фона
Далее сервис оставит то, что вы выделили зеленым (см. пример ниже). После чего обратите внимание на меню справа: в разделе «Background» (фон) выберите инструмент «Image» (изображение) и нажмите по кнопке «Select Image» (выбор картинки).
Выбор нового фона
Последнее действие — сохранить полученное изображение (для этого просто кликните по кнопке с дискеткой в правом углу экрана…).
Сохранение
*
Дополнения по теме — приветствуются!
Удачной работы!
✌
Первая публикация: 26.04.2019
Корректировка: 10.10.2020
Полезный софт:
- Видео-Монтаж
Отличное ПО для начала создания своих собственных видеороликов (все действия идут по шагам!).
Видео сделает даже новичок!
- Ускоритель компьютера
Программа для очистки Windows от мусора (ускоряет систему, удаляет мусор, оптимизирует реестр).
Источник
Как сделать фон для сайта?
Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол «застелить» дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:
Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.
Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо «заточены» руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.
Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html. Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.
В качестве фона можно использовать несколько элементов:
- Цвет;
- Фоновую картинку;
- Текстурное изображение.
Разберемся с применением каждого из них подробнее.
Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style. То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега <body>. Например:
<p>Фон сайта #55D52B</p>
</body>
Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB. Примеры:
<p>Фон сайта rgb(23,113,44)</p>
</body>
<p>Фон сайта green</p>
</body>
Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.
В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.
Поэтому для того, чтобы установить фон для сайта html, лучше использовать шестнадцатеричный формат или RGB.
Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent, то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.
Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image.
Пример:
</body>
Как видно из кода, привязка изображения происходит через путь url, заданный в скобках. Но не все картинки оказываются такими большими, чтобы своими размерами заполнить всю площадь экрана. Посмотрим, как будет отображаться меньший по величине рисунок.
Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!
Нам нужно, чтобы изображение отображалось посредине экрана один раз. Но, к сожалению, браузер не понимает наших возвышенных желаний. И выводит меньшую по размерам картинку для фона сайта столько раз, сколько может вместить в себя площадь экрана:Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat. Возможные значения:
- repeat-x – повторение фонового изображения по горизонтали;
- repeat-y – по вертикали;
- repeat – по обеим осям;
- no-repeat – повторение запрещено.
Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:
</body>
Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:
- Ключевым словом (top , bottom , center, left, right);
- Процентами – отсчет начинается от верхнего левого угла;
- В единицах измерения (пикселях).
Воспользуемся самым простым вариантом центрирования:
</body>
Бывает, что нужно зафиксировать положение рисунка при прокрутке. Поэтому прежде, как сделать картинку фоном сайта, воспользуйтесь специальным свойством background-attachment. Принимаемые им значения:
<ul>
<li> scroll;</li>
<li> fixed.</li>
</ul>
Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]
</body>
В первом примере для фона мы использовали большой и красивый пейзаж пустыни. Но за такую красоту приходится платить сполна. Вес изображения, выполненного в высоком качестве, может достигать нескольких мегабайт.
Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких «метров» займет много времени?
Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.
Для создания темного фона для сайта заходим в Photoshop, создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:
</body>
Для наглядности мы добавили текст и задали его цвет с помощью свойства color. Вот что получилось:
Все свойства, описанные выше, также применимы и для каскадных таблиц стилей. Создадим фон сайта css, переписав код одного из наших предыдущих примеров:
<title>Документ без названия</title>
<style type=»text/css»>
body{
background-image: url(3.jpg);
background-repeat: no-repeat;
background-position: top center;
background-attachment: fixed;
}
</style>
</head>
<body>
</body>
Результат будет аналогичным.
Ну, вот мы и рассмотрели все варианты, как поменять фон на сайте. Теперь осталось лишь создать рисунок будущего ковра и расстелить его на страницах своего ресурса. Но это уже ваших рук дело.
Источник