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

Добавил пользователь Владимир З.
Обновлено: 04.10.2024

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

Как применить полупрозрачность

На протяжении развития браузеров и html в целом, дизайнерами и программистами внедрялись такие основные способы для обеспечения прозрачности:

  • opacity ;
  • PNG картинки;
  • RGBA ;
  • клетчатые изображения.

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

Opacity

При использовании css свойства opacity указывается прозрачность конкретного элемента. Допустимые значения от 0 до 1, где:

  • 1 установлен по умолчанию и указывает, что объект непрозрачный (видимый);
  • 0 – полностью прозрачен и становится невидимым;
  • любое число в промежутке от 0 до 1 – элемент полупрозрачный.

Обратите внимание, что с уменьшением значений заметить объект становится сложнее.

Полупрозрачный фон с применением css свойства opacity

Также следует учесть, прозрачность предается зависимым элементам. Для данных объектов прозрачность повысить можно, но уменьшить нельзя! В результате размещенный на полупрозрачной подложке текст тоже будет полупрозрачным.

В старых версиях IE (до v. 7.0) это свойство не поддерживается. Вместо него возможно применять свойство filter .

Но необходимо иметь в виду, свойства filter нет в спецификациях html, оно изменяется от 1 до 100 и его можно применить к элементам, у которых фиксированный линейный размер ( height или width ) или абсолютное позиционирование ( position: absolute ).

Фон PNG изображение

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

Прозрачный фон с применением полупрозрачного изображения png

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

В отличие от предыдущего способа Opacity , прозрачность распространяется только на один элемент, не затрагивая дочерние. Кроме того, кросс-браузерность понимают практически все браузеры.

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

Существует более актуальный метод, который гораздо проще, чем 2 предыдущих. Его суть в использовании для фона формата RGBA . Первые 3 буквы в переводе с английского обозначают три базовых цвета (красный, зеленый и синий); последняя расшифровывается как альфа-канал и характеризует прозрачность данного элемента.

В результате формат записи выглядит так:

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

Полупрозрачный фон с применением css свойства background-color: rgba();

К минусам относится – не все браузеры понимают данный формат. Настройки будут правильно отображаться в:

  • Opera начиная с версии 10;
  • Internet Explorer с 9;
  • Safari с 3.2;
  • Firefox с 3.

Для пользователей старых версий интернет эксплорера рекомендуется ввести цветовые данные в стандартном для этого браузера формате. Но учтите, что тогда прозрачность не отобразится. Если наличие прозрачности принципиально, можно применить свойство filter , но результат его использования отразится не только на фоне, но и на тексте.

Несмотря на это, цветовая модель RGBA довольно удобна. В отличие от метода PNG , для изменения характеристик объекта не требуется заливать изображение заново, достаточно поменять параметры rgba . Ее преимущество над opacity — транспарентность задается фону и не распространяется на текст.

Клетчатое изображение

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

Фокус в том, чтобы в созданном фоне построить череду прозрачных и непрозрачных точек (пикселей). Таким образом, применив данное изображение как background , получали псевдопрозрачный фон. Данный метод подобен PNG картинке.


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

Выводы

Как использовать прозрачность, для достижения более выразительного эффекта:

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

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

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

Оригинальная фотография розы
Фотография с прозрачным фоном

Фото с однотонным белым фоном
Фото на однотонном зелёном фоне

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

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

Прозрачность фона на сайте создается через свойста CSS. Добиться прозрачности можо двумя способами: через свойство opacity и background:rgba(). Давайте рассмотрим каждый из них, а далее проведем сравнение.

1. Свойство CSS opacity для прозрачности фона

В CSS есть свойство opacity с помощью которого можно задавать прозрачность изображений, текстов, в том числе и фонов.

Задание прозрачности задается просто указанием вещественного числа от 0.0 до 1.0. Чем меньше число, тем менее заметен будет объект.

Давайте рассмотрим пример со свойством opacity.

Этот код преобразуется на странице в следующее:

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Этот код преобразуется на странице в следующее:

Разница между двумя способами заключается в том, что текст внутри блока становится прозрачным в случае использования opacity. Во втором случае такой проблемы нет. Поэтому нужно смотреть уже по ситуации - что конкретно Вы ждете.

Для этого открываем фотошоп и открываем в нем ваш фон переводим его в разряд слоя:для этого зажимаем клавишу Alt и два раза щелкаем мышкой по слою в палитре слоев.Теперь там же в палитре слоев делаем фон прозрачным для этого меняем плотность и прозрачность слоя со 100% скажем на 70%(как это сделала я)вы можите делать так как вам надо(см.рисунок ниже)

Теперь переходим в имиджреди и сохраняем наш фон со следующими параметрами(см. рисунок ниже):

Ну вот и все должно получиться что то вроде этого:

Чем ниже вы зададите % тем более прозрачным выйдет ваш фон.


Дополнение к уроку как сдеать фон прозрачным


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

Читайте также: