Фотошоп удалить цвет сделать прозрачным. Прозрачный цвет и фон в CSS. Задаем прозрачность у css background

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

Пример фотографии розовой розы без изменений и после замены однотонного фона на прозрачный, белый и зелёный:


Первый пример с цветком розы на прозрачном фоне сделан с такими настройками:
 1) Интенсивность замены — 38;
 2) Сглаживание по краям — 5;
 3) Заменить однотонный фон на — прозрачный;
 4) Обрезка (<0) или Добавление (>0) по краям — "-70";
 5) Инвертировать — отключено (галка не стоит).

Для создания второго примера , с белым фоном, использовались такие же настройки, как и в первом примере, кроме параметра: «Заменить однотонный фон на» — белый. В третьем примере , с зелёным фоном, также использованы настройки, как и в первом примере, кроме параметра: «цвет в формате hex» — #245a2d.

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

1) Укажите изображение в формате BMP, GIF, JPEG, PNG, TIFF:

2) Настройки для замены однотонного фона
Интенсивность замены: (1-100)

Сглаживание по краям: (0-100) Заменить однотонный фон на: прозрачный (только для PNG-24) красный розовый фиолетовый синий бирюзовый небесный салатовый зелёный жёлтый оранжевый чёрный серый белый или цвет в формате hex: открыть палитру Обрезка (<0) или Добавление (>0) по краям: (от -100 до 100)
(Интенсивность для дополнительной обрезки или добавления пикселей вокруг выделенной области на прозрачном фоне) Инвертировать выделение (вместо фона заменить передний план)

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

Вам понадобится

  • - Adobe Photoshop.

Инструкция

  • Откройте в Adobe Photoshop нужную картинку (пункт меню «Файл» (File) -> «Открыть» (Open) или горячие клавиши Ctrl+O). Кликните пункт меню «Выделение» (Select) -> «Цветовой диапазон» (Color Range). Появится окно «Цветовой диапазон» (Color range).
  • Найдите пункт «Выбрать», он находится в самом верху окна. Кликните по нему. В открывшемся меню вы можете выбрать группу цветов или тонов, которые впоследствии можно сделать прозрачными. Т.е. только красные цвета, только зеленые, голубые или только средние тона, тени и т.д. Если вам нужно точечно выбрать какой-то один цвет укажите в этом пункте «По образцам».
  • Найдите пункт «Разброс» (Fuzziness) – с его помощью можно расширить диапазон выбираемых цветов. Ниже находятся пункты «Выделенная область» и «Изображение». Если выбрать первый, то в превью-окошке программы будет предварительно отображаться выделенная область. Если второй, то изображение будет показано целиком.
  • В правой части окна находятся три кнопки с изображением пипеток. На первой из них просто пипетка, на второй – пипетка с плюсом, а на третьей – с минусом. Нажмите на первую и кликните в превью-окошке или на самом документе по тому цвету, который вы хотите сделать прозрачным. Выберите пункт «Выделенная область», чтобы увидеть, какие участки изображения выбрались.
  • Если вы хотите добавить к выделенному цвету еще один, нажмите на «Пипетка+», а затем кликните по этому цвету. Если убавить, то действуйте аналогичным образом, только при помощи «Пипетки-». Выбрав необходимый цвет (или цвета), нажмите ОК. Как видите, в документе выбранные цвета стали выделенными.
  • В списке слоев (если он отсутствует, нажмите F7) нажмите правой кнопкой мыши по фону, в появившемся меню выберите «Из заднего плана», а в следующем окне – сразу ОК. Фон превратится в слой. Нажмите Delete на клавиатуре. Выделенные участки станут прозрачными.
  • Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.

    Способ 1 — значение transparent

    Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

    Color: transparent;

    Такой текст нельзя будет увидеть на странице.

    Способ 2 — цветовой режим rgba

    А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

    Background: rgb(230, 121, 156);

    Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

    Background: rgba(0, 0, 0, 0);

    В таком случае остальные 3 цифры особой роли не играют.

    Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.

    Способ 3 — opacity

    Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

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

    Прозрачный фон (background)

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

    Задаем прозрачность у css background

    Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:

    Background-color: rgba(173, 57, 22, 0.5)

    Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.

    Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.

    Прозрачный фон на примере

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

    А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:

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

    Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.

    Статьи по теме: