Как убрать белый фон с картинки онлайн. Как сделать в браузере прозрачный фон

Способы создания прозрачных фонов у блоков в CSS

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

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

• Свойство opacity.
• Использование PNG -картинки
• Формат системы RGBA
• Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

Применение стилевого CSS свойства оpacity позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.Рассмотрим пример.

HTML:

CSS:

В результате мы получили полупрозрачный блок:

Важно!!!

1. Opacity принимает значения из диапазона: 0 (полная прозрачность) – 1 (непрозрачность).
2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:   filter: alpha(Opacity=70);  
   Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
   • с абсолютным позиционированием (position: absolute)
   • с фиксированным линейным размером (height или width).
3. Степень прозрачности наследуется дочерними элементами, при чем дочернему элементу можно увеличить прозрачность, но сделать меньше – нельзя. Т. е. на полупрозрачном фоне НЕ ПРОЗРАЧНОГО текста не сделать.

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

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

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.

   

2. Используем ее в качестве бэкграунда: body { background: url(./vaden-pro-logo.png); } .prozrachen { padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white;</li> text-align: justify; }

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

Важно!!!

1. В отличии от свойства opacity прозрачность задается только для фона
2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность – придется применять другие методы или скрипты.
3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

Важно!!!

1. В отличии от свойства opacity прозрачность задается только фону
2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

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

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

Важно!!!

1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

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

Успехов!!!

Оценок: 7 (средняя 5 из 5)

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

vaden-pro.ru

Как сделать прозрачный фон в Gimp

Чаще всего прозрачный фон в изображении требуется для создания фирменных знаков, коллажей и логотипов для видеороликов. Титры в фильме, графические мемы в Internet, в конце-концов технология chromakey (зеленый фон при съемках фильма) так же имеют много общего с технологией прозрачного фона.

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

Содержание статьи:

Как сделать прозрачный фон в Gimp

У нас есть две картинки и мы хотим сделать из них коллаж. Разместить изображение пингвина на фото тропического пляжа. Почему бы и нет. Пингвинам тоже нужно отдыхать 🙂

Пингвин — символ Linux.Тропический пляж — место, где отдыхают пользователи Linux 🙂

Быстрый способ

Запускаем Gimp и открываем оба файла с картинками.

Начинаем переносить пингвина под пальму. Воспользуемся широко распространенным способом «Скопировать» -> «Вставить». Для этого:

• активируем окно с пингвином и через Правка/Копировать видимое (Shift+Ctrl+C) копируем пингвина в буфер обмена;
• затем переходим в окно с пальмой через Правка/Вставить (Ctrl+V) вставляем изображение с пингвином.

Готово. Пингвин под пальмой, но что-то не так. Если мы просто скопируем  одно изображение поверх другого, то увидим, что белый фон вокруг пингвина закрывает часть изображения с тропическим берегом. Это нам не подходит. Значит нам необходимо избавиться от белого фона. Или, иными словами, сделать фон прозрачным. Тогда через этот прозрачный фон будут видны объекты с картинки тропического берега.

Правильный способ

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

Шаг 1. Альфа-канал

На первом этапе нужно определиться есть ли в изображении альфа-канал. Если его нет, то его надо создать. Именно он будет отвечать за прозрачность. Привыкайте сразу, если где-то говорят об альфа-канале значит подразумевается прозрачность и наоборот. Выбираем в меню Слой/Прозрачность/Добавить альфа

Если альфа-канал уже есть (меню неактивное), то ничего добавлять не нужно. В случае, если меню активное (позволяет добавить), то добавляем альфа-канал к нашему изображению.

Есть другой способ проверки наличия альфа-канала в изображении. Для этого откройте стыкуемый диалог «Каналы«, через меню Окна/Стыкуемые диалоги/Каналы. Если в списке каналов есть «Альфа«, то все в порядке и ваше изображение готово к созданию прозрачности.

Шаг 2. Зоны прозрачности

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

Выделение зон в Gimp — это отдельная история, которой не хватит одной публикации. Существует несколько инструментов, плагинов и множество способов, чтобы выделить группу пикселов для дальнейшей обработки. В нашем случае мы рассмотрим самый простейший способ выделения зоны через инструмент «Выделение смежных областей».

Шаг 3. Прозрачный фон

Теперь все готово к созданию прозрачного фона. Для этого жмем клавишу Delete и изображение принимает вид.То что раньше было белым, стало в серый «квадратик», таким способом Gimp показывает прозрачные области.

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

Шаг 4. Запись в файл

Чаще всего картинки с прозрачным фоном хранят в форматах PNG, GIF и TIFF. В PNG и TIFF прозрачность реализуются через alpha канал, который отвечает за участки с прозрачным фоном. С помощью alpha канала можно сделать не только прозрачное, но и полупрозрачное изображение. В GIF несколько другая технология, там нет alpha канала и прозрачность реализуется в виде самостоятельного цвета в палитре. Полупрозрачности в GIF нет.

Для записи изображения с прозрачными областями в формате PNG выбираем меню Файл/Export As (заметьте, именно Export As, а не экспорт, в некоторых версиях Gimp эта строка не переведена на русский язык) и в появившемся диалоге вводим имя файла, например linux.png. Далее жмем кнопку «Экпортировать«, в диалоге настройке параметров PNG ничего не трогаем и жмем «Экспорт«.

А так выглядят настройки при экспорте в GIF. Тоже ничего нетрогаем и жмем «Экспорт«.

Тут вот еще какой интересный момент. Когда вы открываете в Gimp изображение из PNG или GIF, тот нет необходимости проверять есть ли там альфа-канал или нет, как это описано на Шаге 1. Альфа канал в PNG или GIF всегда существует и можно сразу же начинать работать с прозрачным фоном без ручного добавления альфа-канала.

Шаг 5. Сводим все вместе

Теперь проверим результат нашей работы. Мы возьмем изображение с прозрачным фоном и наложим его поверх обычного изображения. Давайте разместим пигвина в тени от пальмы:На картинке с пингвином: Правка/Копировать видимое (Shift+Ctrl+C) копируем пингвина в буфер обмена.На картинке с пальмами: Правка/Вставить (Ctrl+V) вставляем изображение с пингвином на фото с пальмами.

Как видно, прозрачность работает. Там, где раньше был белый прямоугольник, теперь видны море, пальма и песок. Коллаж готов. Изображение с пингвином органично вписалось в тропический пейзаж. Теперь объединим все видимый слои (а у нас их всего два) командой меню Слой/Прикрепить слой (Ctrl+H). И запишем готовый коллаж в файл Файл/Export As.Интересно, что после сведения слоев, прозрачный фон исчез. В финальном изображении, где пингвин под пальмой уже нет прозрачного слоя. Если вы хотите, чтобы прозрачный фон на слое с пингвином остался для дальнейшей работы над коллажом, то запишите готовое изображение в файл формата XCF (родной формат для GIMP), только не сводите все слои воедино, пусть остаются раздельными.

Заключение

В этой статье мы рассмотрели, как сделать прозрачный фон в gimp 2.8. Как наложить изображение с прозрачным фоном поверх существующего. Быстро пробежались по альфа-каналу. Узнали какие графические форматы поддерживают прозрачность. На простом примере была продемонстрирована работа с прозрачным фоном.

losst.ru

Как убрать белый фон с картинки онлайн

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

Зачем делать прозрачный фон картинки

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

При наложении картинок, фотографий нужно делать прозрачный фон. Дело в том, что каждая картинка (изображение) имеет своё расширение – jpeg, gif, png, bmp и массу других расширений. Все указанные расширения, за исключением части изображений png, не имеют прозрачности картинки. Для наложения такой картинки на другую картинку, следует делать прозрачный фон (смотрите скрин).

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

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

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

 Как убрать белый фон с картинки онлайн в Pixlr

Итак, если Вы раньше не работали в программе Pixlr, то Вам нужно набрать её название в поиске или перейти по этой ссылке — https://pixlr.com/editor/. Эта часть программы является редактором. Регистрироваться в программе не надо, устанавливать её на компьютер тоже не надо.

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

Заходим в программу Pixlr, во всплывающем окошке Pixlr Editor нажимаем «Загрузить изображение с компьютера».

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

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

Теперь нужно нажать либо клавишу «Delete», либо выбрать в верхней части программы «Редактировать» и нажать «Очистить». У Вас появится фон в виде шахматной доски, это означает, что прозрачный фон картинки получен. Теперь остается сохранить картинку. Для этого выбираем «Файл» и «Сохранить».

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

Как сделать прозрачный фон картинки в фотошопе

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

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

Для начала нужно открыть программу фотошоп и загрузить в неё нужную нам картинку, в которой мы хотим сделать прозрачный фон. Далее нужно разрешить работу со слоями. Эту работу делаем точно так же, как делали мы это в программе Pixlr. Для этого переходим в правую часть программы, где написано «Фон» и нажимаем левой кнопкой мыши на замочек. После этого разрешается работа со слоями (смотрите скрин, стрелочка 1).

Далее выбираем инструмент «Быстрое выделение» (стрелка 2), выбираем кисть со знаком + (на скрине это стрелка 3). Если мы хотим делать прозрачный фон без искажений, то нужно установить минимальный размер редактируемых пикселей (стрелка 4).

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

Остаётся сохранить картинку. Если наша картинка в расширении png, то её можно сохранить через кнопки «Файл» и «Сохранить как». Если Вы сделали прозрачный фон картинки в другом расширении, то полученную картинку нужно сохранить в формате png. Для этого нажимаем кнопки «Файл» и «Сохранить для Web и устройств», а в верхней части нового окна выбираем «PNG» и нажимаем кнопку «Сохранить». Попутно мы можем в этом окне изменить размеры картинки.

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

Заключение

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

Сделав картинку без фона, Вы сможете проводить любые дизайнерские работы, создавать свои рекламные баннеры. Вы сможете создавать профессиональные обложки для книг и коробки для видео-курсов. Великое дело быть свободным от фрилансеров. Кстати, Вы можете делать отличные профессиональные 3-D обложки с использованием экшенов (шаблонов) в программе фотошоп. Лично я сам использую этот способ. Надеюсь, представленный материал принесёт Вам пользу! Пишите отзывы в комментариях. Удачи Вам!

C уважением, Иван Кунпан.

Статьи на блоге, в которых рассказано о работе в программе Pixlr:

Полезно будет прочитать также статью «Как конвертировать psd в png и jpg«.

Просмотров: 4904

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

Вы можете почитать:

biz-iskun.ru

Как сделать прозрачный фон изображения из белого или однотонного? Инструмент Волшебная палочка - Графические редакторы - Работа на компьютере: инструкции и советы - Образование, воспитание и обучение

Почему в презентациях лучше использовать изображения с прозрачным фоном?

Слева — изображение с непрозрачным фоном, справа — с прозрачным.

Как найти изображения PNG в Яндекс или Гугл картинках?

Обычно файлы изображений с прозрачным фоном имеют расширение png (от наименования формата файла Portable Network Graphics), так что нам достаточно будет набрать в строке поиска: «гном png», чтобы найти подходящую картинку.

Обратите внимание на «клетчатый» фон изображения в примере поиска Google. Именно таким образом во всех редакторах изображений показывается «прозрачный» фон рисунка.

В примере поиска «Яндекса» отображение прозрачного фона будет другим (картинка на темном фоне):

В любом случае, на картинке можно нажать правую кнопку мыши, скопировать ее в буфер обмена и тут же вставить в презентацию, проверить.

К сожалению, не всегда можно найти подходящее изображение в формате png с прозрачным фоном. Но если есть изображение на белом (или любом однотонном) фоне, то этот фон можно сделать прозрачным. Для этого мы воспользуемся мощным и бесплатным графическим редактором Pixbuilder Studio.

Скачать этот редактор можно по ссылке http://www.wnsoft.com/ru/pixbuilder/

После скачивания установите и запустите программу.

Шаг 1. Как открыть изображение в редакторе Pixbuilder Studio

Первый способ

Подходит тем, кто пользуется браузерами Google Chrome, Яндекс.Браузер или Firefox.

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

После этого в редакторе выберите меню Файл — Новый.

В появившемся окне, не меняя никаких параметров, нажмите ОК.

Далее, в меню редактора нажмите Правка — Вставить.

Второй способ

Скачайте картинку к себе на компьютер.

Перетащите файл с картинкой на поле редактора или откройте картинку через Файл — Открыть.

Перетаскивание

Команда: Файл — Открыть

В любом случае результат должен быть таким:

Шаг 2. Делаем прозрачный фон:функция «Волшебная палочка»

В редакторе слева от картинки находится панель инструментов.

Нам потребуется «Волшебная палочка». Выберите ее, затем проконтролируйте, чтобы допуск был в пределах 20-40 единиц.

Нажмите на картинку для увеличения

Щелкните «Волшебной палочкой» в любой области белого фона. Вы увидите, как он выделился «бегущими муравьями».

Далее, нажмите на клавиатуре кнопку Delete или выберите в меню редактора Правка — Вырезать.

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

Шаг 3. Сохраняем картинку с прозрачным фоном

Этот результат надо сохранить на жесткий диск через меню Файл — Сохранить как…

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

В появившемся окне надо проверить, чтобы все настройки были, как на представленном скриншоте, и нажать Сохранить.

Картинка с прозрачным фоном готова!

Дополнительные советы:

• Волшебной палочкой можно выделять не только внешние контуры, но и внутренние (например, для буквы «О» или «Ю»). То есть сначала надо выделить и удалить фон снаружи, а потом — внутри.
• Если палочка не помогает (неправильно выделяет фон), то можно воспользоваться Стирательной резинкой, и стереть фон вручную.
• Если палочка выделяет слишком много или слишком мало фона (это случается, когда цвета изображения и фона похожи), то можно изменить настройку Допуск в ту или другую сторону, и выделить фон заново. (См.комментарии).
• Если вам не понравится результат ваших действий, то его всегда можно отменить (вплоть до момента открытия картинки в редакторе) через меню Правка — Отмена или через выбор действия в окне История (окно находится в редакторе справа, второе снизу).

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

Об авторе: Сергеева Елена Михайловна, учитель начальных классов, ГБОУ гимназия №498 Невского района г. Санкт-Петербурга.

pedsovet.su

Смотрите также

• 
  Загрузить фото в инстаграм через браузер
• 
  Как делать скриншоты в яндекс браузере
• 
  Как удалить браузер гугл с телефона
• 
  Как убрать начальную страницу в браузере
• 
  Как убрать браузер яндекс из автозагрузки
• 
  Как сделать браузер по умолчанию амиго
• 
  Почему в браузере музыка не работает
• 
  Как настроить почту в яндекс браузере
• 
  Удалить рекламу в браузере яндекс навсегда
• 
  Как включить кэш браузера в htaccess
• 
  Как снять блокировку сайтов в браузере