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

RGBA

RGBA — это такой же способ установки цвета, что и RGB. Но у него есть ещё одно число — альфа канал.
Это степень прозрачности. Он позволяет установить в CSS порзрачный цвет, то есть
сделать элемент прозрачным. При этом через элемент можно видеть фон
блока или другой элемент, который оказался под текущим элементом при позиционировании. Прозрачность может
иметь значения от 0 до 1. При 1 элемент является непрозрачным. При 0 элемент является полностью прозрачным,
то есть, его не видно. Любое число между этими значениями делает элемент прозрачным.
Для установки цвета в CSS свойстве пишется слово rgba, затем в скобках через запятую указываются цвета
и прозрачность. Чтобы сделать
текст таким же цветом, но прозрачным, стиль нужно
установить так:

4
color: rgba(156, 22, 181, 0.5);

Задание фона в RGBA

Избежать этой проблемы мы сможем в том случае, если откажемся от использования opacity и зададим значение для css-свойства background в формате RGBA.

Формат RGBA дает нам возможность задать значение цвета, используя значение красного, зеленого, а так же синего цветов в десятичном виде, а так же, позволяет задать прозрачность при помощи использования альфа-канала. Уровень альфа-канала задается в интервале от 0 до 1. То есть, так же как и в css-свойстве opacity.
Например так:
background:rgba(255,255,255,0.6);

Для наглядности добавим в блок с фоном еще один элемент с текстом, для которого зададим в css фон в формате RGBA с уровнем прозрачности 0.3.

Вот что у нас получилось:

Блок без прозрачности

Демонстрация работы css-свойства opacity

Так выглядит фон с RGBA

В код страницы был добавлен следующий фрагмент HTML-кода:

XHTML

Так выглядит фон с RGBA

1
2
3

class=»rgba»>

Так выглядит фон с RGBA

В css-файл я прописала следующие свойства для соответствующего класса:

CSS

.rgba{
width: 300px;
padding:30px;
margin:auto;
text-align:center;
margin:10px;
font-size:18px;
color:#fff;
background:rgba(0,0,0,0.3);
}

1
2
3
4
5
6
7
8
9
10
11

.rgba{

width300px;

padding30px;

marginauto;

text-aligncenter;

margin10px;

font-size18px;

color#fff;

backgroundrgba(0,0,0,0.3);

}

На этом у меня сегодня все. Используя описанные в данной статье возможности CSS3, вы сможете задать любой уровень прозрачности с помощью css для нужного блока, что поможет вам добиться наиболее подходящего внешнего вида для своего сайта. А я надеюсь, что мне удалось раскрыть тему, и у вас не возникнет сложностей с применением данных приемов работы.

С уважением Юлия Гусарь

Создание прозрачного фона у готового изображения

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

Перед нами открывается окно, в котором нужно выбрать редактируемое изображение. После того, как мы определились с выбором картинки, жмем на кнопку «Открыть».

Как только файл откроется в программе, опять возвращаемся в главное меню. Последовательно кликаем на пункты «Слой» — «Прозрачность» — «Добавить альфа-канал».

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

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

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

Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.

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

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

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

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

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

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

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

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

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

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

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

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

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

Ссылка на основную публикацию