Создание прозрачного фона для картинки онлайн
Содержание:
- Почему не получается удалить фон у изображения?
- Вырезание объекта в фотошопе
- Удаление фона в PowerPoint 2007
- Как сделать прозрачный фон картинки в PowerPoint
- Инструмент для стирания фона
- Изображение на фоне в презентации PowerPoint
- Как сделать прозрачный фон у картинки?
- Как сделать прозрачный фон у изображения и устранить дефект за счет изменения размера?
- Шаг 3. Сохраняем результат
- Как сделать прозрачный фон у картинки и устранить дефект за счет увеличения размера изображения?
- Настройка прозрачного фона для изображения
- Почему не получается удалить фон у изображения?
- Настройка прозрачного фона для изображения
- Шаг 1. Работаем с оригиналом
- IMGOnline
- Дополнительные советы:
- Прозрачность фона
Почему не получается удалить фон у изображения?
Итак, PowerPoint имеет все инструменты, чтобы справится с такой задачей как удаление фона у картинки. Однако, не будем забывать — перед нами все же не редактор изображений (как Photoshop), а редактор презентаций, поэтому в деле обработки растровых изображений, PowerPoint все-таки не всемогущ.
Попытка удалить фоновое изображение у сложного рисунка в PowerPoint. Вроде бы и получилось, но огрехи видны.
Чтобы успешно удалить фон и картинки, она должна соответствовать ряду требований:
- Изображение должно быть достаточно большим, чтоб не были видны пиксели
- Смысловая часть изображения (то что мы оставляем) должна контрастировать с фоном (то что мы удаляем), желательно отделена от него обводкой или цветами.
- Сложные полноцветные рисунки и фотографии очень слабо подходят для обрезания фона в PowerPoint. За счет того, что цвета смысловой части и фона в фотографиях слабо контрастны между собой, края обработанных таким образом изображений будут смазанными и не четкими.
Если приемлемого качества удаления или прозрачности фона не удалось добиться с первого раза — не мучайте себя и PowerPoint, скорее всего в этом случае проще воспользоваться Photoshop’ом или поискать другую иллюстрацию.
Вырезание объекта в фотошопе
Чтобы сделать прозрачный фон, необходимо вырезать предмет, а фон удалить. В зависимости от формы предмета, выберите тот способ выделения, который будет удобен в данной ситуации.
Качество готовой картинки в основном зависит от качества выделения. Постарайтесь максимально точно повторить форму предмета подходящими инструментами лассо.
Если края предмета имеют не четкие края, выделение тоже должно иметь слегка размытые грани. Для этого нужно щелкнуть по выделению правой кнопкой мыши и задать значение «Растушевки». Значение размытия сработает ко всему выделению.
Однако, бывают редкие ситуации, когда только часть предмета имеет размытый край или отсутствие фокусировки. В таком случае, необходимо комбинировать несколько способов выделения.
Для примера, я специально выбрал более сложное изображение с разной степенью фокусировки, соответственно с разной четкостью границ.
Основной предмет с высокой четкостью границ можно выделить обычным инструментом «Лассо», а нечеткие края — мягкой кистью в режиме «Быстрой маски» (Quick Mask — Клавиша Q), как показано на снимке ниже.
Преимущество этого метода заключается в том, что вы можете менять жесткость краем меняя жесткость кисти в процессе рисования. Но есть и недостаток: выделение кистью не такое точное как лассо. Но это не единственный способ получить выделение с разной четкостью границ.
Добавление к выделению нечетких областей
А теперь, подробнее о другом способе выделения. Выделите основную часть изображения с четкими границами, затем нажмите — Select/Save Selection…
Снимите выделение и создайте новое, вокруг нечеткой области. Нажмите правой кнопкой мыши — Feather… (Растушевка…) Задайте необходимое значение. Как правило, нескольких пикселей будет достаточно.
Теперь, нажмите — Select/Load Selection… Выберите пункт — Add to Selection (добавить к выделению). Ваше прошлое выделение склеиться с новым, а разные степени размытия сохранятся.
Возможно, этот прием покажется более сложным, чем предыдущий. В общем, делайте, как удобно вам.
Форматы поддерживающие прозрачный фон
После того, как вы удалили фон, необходимо сохранить изображение в формате поддерживающем прозрачность.
PSD — самый первый из них. Он легко читается во всех редакторах Adobe и не только. Он содержит всю информацию о слоях эффектах и т.д. поэтому, как правило, имеет большой вес.
Tiff — формат похожий по свойствам с предыдущим. Тоже может содержать прозрачные области. Из-за высокого качества, часто используется в полиграфии.
PNG — имеет относительно не большой вес и позволяет сохранять качество изображения. Чаще всего используется в веб-дизайне. Баннера, кнопки сайтов, графические элементы веб-страницы часто содержат этот формат.
Внимание! Прежде чем сохранять обязательно удалите альфа каналы, если вы их создавали в процессе выделения
Удаление фона в PowerPoint 2007
Способ 1.
-
Чтобы удалить картинку, использованную в качестве фона на слайде, нужно будет нажать правой кнопкой мыши на любой лист презентации.
Нажимаем ПКМ на любой лист презентации
-
Выбрать строку «Формат фона».
Выбираем строку «Формат фона»
-
В меню «Заливка» нажать на фразу «Скрыть фоновые рисунки».
Нажимаем «Скрыть фоновые рисунки»
-
На панели инструментов нужно будет выбрать любой другой фон для слайдов.
На панели инструментов выбираем фон для слайдов
Способ 2.
-
Заменять один фон другим не всегда нужно. Достаточно изображение сделать прозрачным. Для этого необходимо будет кликнуть правой кнопкой мыши на любом слайде документа.
Кликаем ПКМ на любом слайде документа
-
Выбрать фразу «Формат фона» и нажать на него.
Нажимаем «Формат фона»
-
В меню «Заливка» найти строку «Прозрачность».
В меню «Заливка» выбираем «Прозрачность»
-
Нажать на бегунок, расположенный слева, и протянуть его направо, пока в расположенном рядом окне не появится цифра 100.
Нажимаем на бегунок и доводим его до 100
Как сделать прозрачный фон картинки в PowerPoint
Презентация состоящая из одного текста — невероятно скучное зрелище, гораздо лучше дела идут когда слайды презентации наполнены ещё и полезной смысловой составляющей — графиками, схемами и конечно изображениями. Однако, мало просто накидать подходящие по смыслу картинки на слайд, ведь материал должен не только соответствовать содержанию презентации, но и выглядеть презентабельно.
К сожалению далеко не всегда удается разжиться «идеальной» графикой, намного чаще нам попадается либо совсем уж маленькие картинки состоящие из одних пикселей, или изображения с нанесенными поверху водяным знаком или же имеющие фоновый рисунок совершенно не подходящий к нашему проекту. Фон картинки, на самом деле является худшей из проблем — мало того, что из-за него картинка может смотреться в презентации как заплатка, так он ведь ещё и и «наползать» на текст может, уменьшая итак небольшую полезную площадь слайда.
К счастью, если вы работаете в PowerPoint, со всеми этими бедами можно вполне успешно бороться. Инструменты по удалению фона, а точнее наложению эффекта прозрачности на изображение, в последних версиях этой программы работают довольно эффективно. И сегодня я расскажу о них максимально подробно, а за одной подкину несколько идей из «житейского» опыта!
Инструмент для удаления фона изображений в PowerPoint
Инструмент для стирания фона
В более ранних версиях Microsoft PowerPoint присутствовал специальный инструмент для стирания белого фона у фотографий. Функция позволяла пользователю нажать на область фона, которую следует стереть. Это было крайне удобно, однако исполнение хромало.
Дело в том, что в этой функции использовалась обыкновенная процедура наложения параметра прозрачности на выбранный цветовой контур. Как итог, у фотографии все равно оставалась рамка из белых пикселей, очень часто фон обрезался неровно, оставались пятна и так далее. А уж если фигура на картинке не имела замкнутой четко выделяющейся границы, то этот инструмент вообще все мог сделать прозрачным.
В PowerPoint 2016 решили отказаться от такой проблемной функции и усовершенствовали этот инструмент. Теперь избавиться от фона намного сложнее, но зато это можно сделать очень точно.
Изображение на фоне в презентации PowerPoint
- Откройте программу PowerPoint.
Открываем программу PowerPoint
На панели инструментов найдите кнопку «Вид». Кликните на ней.
Нажимаем кнопку «Вид»
В открывшемся графическом интерфейсе найдите группу «Режимы образцов».
Выбираем группу «Режимы образцов»
Нажмите левой кнопкой мыши на кнопку «Образец слайдов».
Нажимаем ЛКМ на кнопку «Образец слайдов»
Слева от большого листа будут приведены уменьшенные копии слайдов. Кликните правой кнопкой мыши на первом листе.
Кликаем ПКМ на первом листе
В диалоговом окне найдите строку «Формат фона». Нажмите на нее.
Нажимаем строку «Формат фона»
В «Формате фона» смотрим первый пункт «Заливка».
В «Формате фона» находим заливку
Шаг 1. В открывшемся графическом интерфейсе кликните мышью на кнопке «Заливка».
Кликаем по кнопке «Заливка»
Шаг 2. Выберите в списке «Заливка» строку «Рисунок или текстура». Нажмите на нее.
Выбираем строку «Рисунок или текстура»
Шаг 3. Автоматически белый фон презентации будет преобразован в текстуру. Если такой рисунок пользователя не устраивает, нажмите на кнопку «Текстура».
Нажимаем на кнопку «Текстура»
Шаг 4. Выберите оптимальный вариант из предложенных.
Выбираем оптимальный вариант из предложенных
Шаг 5. Нажмите «Применить ко всем», чтобы закрыть диалоговое окно.
Вставка изображения
Способ 1.
Шаг 1. Если же вместо текстуры на фоне презентации должна быть другая картинка, сохраненная в памяти компьютера, повторите все действия, описанные выше. Однако вместо кнопки «Текстура» нажмите на «Файл».
Выбираем оптимальный вариант из предложенных
Шаг 2. В открывшемся окне выберите изображение, которое нужно вставить в презентацию.
Шаг 3. Нажмите кнопку «Применить ко всем», чтобы подтвердить свои действия.
Нажимаем кнопку «Применить ко всем»
Примечание! Подходящее изображение может быть предложено и самой программой PowerPoint.
Для этого нужно будет вместо «Файла» нажать на кнопку «Картинка».
В окне «Формат фона», в пункте «Заливка» нажимаем на «Картинка»
Способ 2.
Шаг 1. Не обязательно фотографию сохранять в памяти компьютера. Достаточно лишь ее скопировать на каком-нибудь сайте.
Скачиваем картинку из интернета
Шаг 2. После чего изображение можно будет вставить на слайд презентации, нажав в диалоговом окне «Формат фона» кнопку «Буфер обмена».
Вставляем на слайд презентации, нажимаем в «Формат фона» кнопку «Буфер обмена»
Как сделать прозрачный фон у картинки?
Сделать прозрачный фон у картинки одновременно просто и сложно. Все зависит от того, какие эффекты используются в самой картинке, и от того, насколько четко разделена граница фона и нужной части. Так, например, если основная часть картинки имеет четкие границы и не содержит эффектов на границах с фоном, как, например, мягкой тени, то сделать у такой картинки прозрачный фон очень просто. Для этого вы открываете картинку в редакторе. Выбираете инструмент под названием «волшебная палочка». Настраиваете чувствительность, например, на 22% и щелкаете на фоне. После чего выбранную область попросту удаляете. И вот как это выглядит:
Однако, чаще всего это не так, поэтому после удаления фона будут оставаться дефекты, которые можно устранить с помощью следующих хитростей.
Как сделать прозрачный фон у изображения и устранить дефект за счет изменения размера?
Если картинка не имеет четких границ с фоном, как, например, в случае с мягкими тенями или плавными переходами контура картинки, то сделать фон изображения прозрачным уже не получится за один шаг. Необходим дополнительный шаг для устранения дефектов за счет уменьшения размера картинки. Суть метода заключается в том, что вы берете картинку большего размера. После чего вырезаете фон, а затем уменьшаете картинку до нужных размеров. Хитрость заключается в том, что при уменьшении размеров, редакторы сглаживают цвета и их переходы, поэтому мелкие дефекты попросту исчезнут. Вот пример:
Как видите, на уменьшенном изображении совершенно не видны дефекты, которые были получены после удаления фона на исходной картинке. Однако, далеко не всегда у вас под рукой могут быть картинки больших размеров, и тогда вы можете использовать следующий трюк.
Шаг 3. Сохраняем результат
Не спешите закрывать окно замены фона, прежде – сохраните результат. Нажмите кнопку «Сохранить в файл». В появившемся окне введите название изображения и в строке «Тип файла» установите в качестве формата PNG или GIF
Это важно, поскольку только указанные форматы поддерживают отображение прозрачных участков. Если вы пропустите этот нюанс, программа автоматически сохранит изображение с белым фоном
Проверьте настройки и повторно кликните «Сохранить». Готово!
Сохраняем готовую картинку
Быстро и легко, правда? Всего три шага – и вы получили фото с прозрачным фоном!
При желании вы можете дополнительно обработать изображение уже после замены фона
Обратите внимание на панель инструментов. С помощью кистей осветления и затемнения, размытия и резкости вы сможете редактировать отдельные участки снимка
Инструмент «Штамп» пригодится для ретуши. Просто зажмите кнопку ALT, выберите на фото область, которая будет источником штампа, и закрасьте нежелательный объект.
Корректируем фото штампом
Наложите слой с png-или gif-картинкой на другое изображение. Меняйте размер и положение объекта. Настройте режим смешивания и прозрачность, при желании используйте маску. Подробную инструкцию о том, как выполнить фотомонтаж в «Домашней Фотостудии», вы найдёте в других статьях онлайн-учебника.
Теперь вы знаете, как сделать задний фон картинки прозрачным и как можно применить этот полезный навык. Если вы решите скачать «Домашнюю Фотостудию», вам не нужно будет осваивать сложные графические редакторы. Качественная ретушь, быстрое устранение дефектов, доступный новичку фотомонтаж – в программе есть всё необходимое для работы с фотографиями. Преображайте любые изображения быстро, просто и с удовольствием!
Как сделать прозрачный фон у картинки и устранить дефект за счет увеличения размера изображения?
Когда у вас есть только одна картинка, которая в придачу включает в себя различные эффекты и имеет нечеткие границы, то предыдущий трюк для создания прозрачного фона уже не подойдет. И необходимо устранять дефекты другим способом. Обычно, в такой ситуации, вы можете начать пытаться убирать мелкие дефекты вручную. Стирать ластиком мелкие пиксели. Вручную выделять края картинки и пытаться применить к ним инструменты, по типу «размытие». И так далее. Но, есть способ гораздо проще и быстрее. Суть метода отчасти является продолжением предыдущего, но все же он отличается порядком. Вы берете картинку и увеличиваете ее, как минимум, в 2 раза. Используя волшебную палочку, удаляете фон. А затем уменьшаете изображение до обратного размера. Таким образом, большинство мелких дефектов уйдут за счет предыдущей хитрости, а качество изображения останется примерно тем же самым. Вот пример:
Как видите, даже имея изображение одного размера, вы легко можете создать картинку с прозрачным фоном менее, чем за 1 минуту, в любом среднем графическом редакторе.
Теперь, вы знаете, как сделать прозрачной картинку, а так же знаете как сделать прозрачный фон у изображения и устранить мелкие дефекты.
Рубрики:
- дизайн
- изображение
- редактор
- Как улучшить плохое качество изображения и устранить дефекты?
- О взаимодействии доменных имён и IP адресов в Интернете
Настройка прозрачного фона для изображения
С первого взгляда заметно, что «автоматика» явно ошиблась — помечены далеко не все ненужные области рисунка, зато вдобавок помечен на удаление и ряд тех областей, что я удалять не планировал. Давайте поможем роботу!
Растягиваем область очистки фона на все изображение
Первым делом растянем область действия инструмента «Удаление фона» на всю картинку. Сделать это просто — щелкайте управляющие элементы (белые квадратики на рамке) выделения и тяните их мышью до исходного размера изображения. Не сказать, что все встало на свои места, но, во всяком случае, теперь PowerPoint хотя бы не отрезает у картинки нужные детали.
Теперь самое интересное: на панели инструментов активируйте инструмент «Пометить области для удаления» и поочередно, не торопясь, щелкните мышью в те части рисунка, которые желаете сделать прозрачными, то есть в элементы фонового рисунка, который и нужно удалить. На месте каждого «клика» появится значок в виде кружка со знаком минус внутри. Каждому однородному или однотонному фрагменту «ненужностей» должен достаться свой «минус».
Инструмент для пометки областей на изображении, которые нужно удалить или наоборот оставить
Как только вы пометите несколько соседних фрагментов, они окрасятся в уже знакомый нам пурпурный цвет — программа с помощью математических вычислений рассчитает заданные вами параметры и автоматом «закрасит» все соседние точки.
Шаг за шагом, «прокликайте» все ненужные фоновые фрагменты и добейтесь того, чтобы пурпурным цветом оказалось выделено только лишнее. Если что-то не получается, не отчаивайтесь и продолжайте добавлять точки. В крайнем случае, все можно будет вернуть назад в любой момент.
Ну вот, теперь отмечены все фоновые элементы картинки. Можно резать.
Как только все элементы будут помечены, нажимайте кнопку «Сохранить изменения» на панели инструментов.
В идеале, на листе у вас останется только сам рисунок — его фон будет полностью очищен, а точнее станет прозрачным. Если полученный результат вас не устроит — вы всегда можете отменить изменения или добавить ещё пару точек, щелкнув по картинке два раза левой кнопкой мыши и повторно воспользовавшись инструментом «Удаление фона».
Нажатие на кнопку «Очистить изменения» вернет картинку к первоначальному виду
Почему не получается удалить фон у изображения?
Итак, PowerPoint имеет все инструменты, чтобы справится с такой задачей как удаление фона у картинки. Однако, не будем забывать — перед нами все же не редактор изображений (как Photoshop), а редактор презентаций, поэтому в деле обработки растровых изображений, PowerPoint все-таки не всемогущ.
Попытка удалить фоновое изображение у сложного рисунка в PowerPoint. Вроде бы и получилось, но огрехи видны.
Чтобы успешно удалить фон и картинки, она должна соответствовать ряду требований:
- Изображение должно быть достаточно большим, чтоб не были видны пиксели
- Смысловая часть изображения (то что мы оставляем) должна контрастировать с фоном (то что мы удаляем), желательно отделена от него обводкой или цветами.
- Сложные полноцветные рисунки и фотографии очень слабо подходят для обрезания фона в PowerPoint. За счет того, что цвета смысловой части и фона в фотографиях слабо контрастны между собой, края обработанных таким образом изображений будут смазанными и не четкими.
Если приемлемого качества удаления или прозрачности фона не удалось добиться с первого раза — не мучайте себя и PowerPoint, скорее всего в этом случае проще воспользоваться Photoshop’ом или поискать другую иллюстрацию.
Настройка прозрачного фона для изображения
С первого взгляда заметно, что «автоматика» явно ошиблась — помечены далеко не все ненужные области рисунка, зато вдобавок помечен на удаление и ряд тех областей, что я удалять не планировал. Давайте поможем роботу!
Растягиваем область очистки фона на все изображение
Первым делом растянем область действия инструмента «Удаление фона» на всю картинку. Сделать это просто — щелкайте управляющие элементы (белые квадратики на рамке) выделения и тяните их мышью до исходного размера изображения. Не сказать, что все встало на свои места, но, во всяком случае, теперь PowerPoint хотя бы не отрезает у картинки нужные детали.
Теперь самое интересное: на панели инструментов активируйте инструмент «Пометить области для удаления» и поочередно, не торопясь, щелкните мышью в те части рисунка, которые желаете сделать прозрачными, то есть в элементы фонового рисунка, который и нужно удалить. На месте каждого «клика» появится значок в виде кружка со знаком минус внутри. Каждому однородному или однотонному фрагменту «ненужностей» должен достаться свой «минус».
Инструмент для пометки областей на изображении, которые нужно удалить или наоборот оставить
Как только вы пометите несколько соседних фрагментов, они окрасятся в уже знакомый нам пурпурный цвет — программа с помощью математических вычислений рассчитает заданные вами параметры и автоматом «закрасит» все соседние точки.
Шаг за шагом, «прокликайте» все ненужные фоновые фрагменты и добейтесь того, чтобы пурпурным цветом оказалось выделено только лишнее. Если что-то не получается, не отчаивайтесь и продолжайте добавлять точки. В крайнем случае, все можно будет вернуть назад в любой момент.
Ну вот, теперь отмечены все фоновые элементы картинки. Можно резать.
Как только все элементы будут помечены, нажимайте кнопку «Сохранить изменения» на панели инструментов.
В идеале, на листе у вас останется только сам рисунок — его фон будет полностью очищен, а точнее станет прозрачным. Если полученный результат вас не устроит — вы всегда можете отменить изменения или добавить ещё пару точек, щелкнув по картинке два раза левой кнопкой мыши и повторно воспользовавшись инструментом «Удаление фона».
Нажатие на кнопку «Очистить изменения» вернет картинку к первоначальному виду
Шаг 1. Работаем с оригиналом
В стартовом окне кликните кнопку «Открыть изображение», в дереве файлов найдите папку, где хранится нужное изображение. Загрузите картинку в пограмму для работы.
Открыть фото для работы
Прежде, чем выполнить замену фона, убедитесь, что на снимке вас всё устраивает. В меню «Изображение» вы найдёте множество удобных инструментов для улучшения фото. Исправьте несовершенства, выбрав вкладку «Устранение дефектов». Вы легко сможете удалить с фото шумы, эффект красных глаз или исправить нарушение цветового баланса. Используйте «Коррекцию освещения» для настройки экспозиции и детализации вручную.
Улучшите качество фото
Довольны результатом? Замечательно, теперь вам предстоит изменить фон на фото.
IMGOnline
Еще один неплохой онлайн-сервис, который помогает нам в работе с графическими файлами. Разработчики наделили его такими инструментами, как сжатие, изменение размера, обрезка, конвертация изображений.
Также с его помощью можно обработать картинки и наложить на них небольшие и простые эффекты. Ну и конечно же, как же без функции – прозрачность.
Зайдя на сайт веб-сервиса, выберите и откройте нужную для редактирования картинку. Далее, следует сделать настройку параметров замены фона.
В случае, если вам нужен только прозрачный фон – не меняйте настройки, оставьте их как есть. Если же вы хотите поменять цвет фона – можете выбрать любой, который выпадет вам из списка.
При желании, можно вводить НЕХ-код требуемого цвета либо выбрать нужный оттенок из открывшейся палитры.
После того, как вы определились с параметрами нового фона, можно сохранить файл. Для этого следует выбрать формат изображения, которое мы обрабатываем.
Рекомендуется сохранять в формате .png. Чтобы убедиться, все ли вы сделали правильно, следует открыть изображение для предварительного просмотра. Точно также можно осуществить и следующую процедуру, как сделать края картинки прозрачными.
Недостатки данного онлайн-сервиса. К сожалению, идеально откорректировать можно только однородный фон. В случае, если в нем будут какие-то дополнительные цвета – убрать удастся только лишь один цвет.
К сожалению, еще одним недостатком данного сервиса можно назвать то, что если у рисунка с фоном будет совпадать какой-то цвет, то при редактировании он также исчезнет.
Точно такие же недостатки будут присутствовать, если вы захотите воспользоваться другой программой и озадачитесь как сделать картинку прозрачной в paint.
Дополнительные советы:
- Волшебной палочкой можно выделять не только внешние контуры, но и внутренние (например, для буквы «О» или «Ю»). То есть сначала надо выделить и удалить фон снаружи, а потом — внутри.
- Если палочка не помогает (неправильно выделяет фон), то можно воспользоваться Стирательной резинкой, и стереть фон вручную.
- Если палочка выделяет слишком много или слишком мало фона (это случается, когда цвета изображения и фона похожи), то можно изменить настройку Допуск в ту или другую сторону, и выделить фон заново. (См.комментарии).
- Если вам не понравится результат ваших действий, то его всегда можно отменить (вплоть до момента открытия картинки в редакторе) через меню Правка — Отмена или через выбор действия в окне История (окно находится в редакторе справа, второе снизу).
В заключение статьи хочется добавить, что Pixbuilder Studio — очень хороший и гибкий графический редактор (Волшебная палочка — это всего лишь один инструмент из многих), и с его помощью можно добиться многого в реализации ваших учебных материалов. Не бойтесь экспериментировать.
Об авторе: Сергеева Елена Михайловна, учитель начальных классов, ГБОУ гимназия №498 Невского района г. Санкт-Петербурга.
Прозрачность фона
Есть два возможных способа сделать элемент прозрачным: свойство , описанное выше, и указание цвета фона в RGBA формате.
Возможно вы уже знакомы с моделью представления цвета в формате . (Red, Green, Blue — красный, зеленый, синий) — цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:
color: rgb(255,255,0); color: rgb(100%,100%,0);
Цвета, заданные с помощью , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.
Объявление цвета схоже по синтаксису со стандартными правилами . Однако, кроме всего прочего, нам потребуется объявить значение как (вместо ) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от (полная прозрачность) до (полная непрозрачность).
color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);
Разница между свойством и заключается в том, что свойство применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):
body { background-image: url(img.jpg); } .prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; } .prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; }
Попробовать »
Примечание: значения не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения :
background: rgb(255,255,0); background: rgba(255,255,0,0.5);