Полупрозрачный фон

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

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

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

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

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

Opacity

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

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

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

<!-- html -->
<body>
  <div class="text">
    Применение css свойства opacity затрагивает весь представленный контент. Редактировать отдельные блоки не представляется возможным.
  </div>
</body>
/* css */
body {
  background-image: linear-gradient(-50deg, #e52b50, #df73ff);
}
.text {
  padding: 9px;
  background: #77dde7;
  margin: 0 auto;
  width: 55%;
  opacity: 0.5;
}
Полупрозрачный фон с применением css свойства opacity

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

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

filter: alpha(opacity=50);

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

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

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

<!-- html -->
<body>
  <div class="text">
    Изображение в PNG формате может использоваться без изменения параметра прозрачности. Для изменения уровня полупрозрачности необходимо заменить само изображение.
  </div>
</body>
/* css */
body {
  background: url(/fon.png);
}
.text {
  padding: 9px;
  background: url(/fon_transparent.png);
  margin: 0 auto;
  width: 55%;
}
Прозрачный фон с применением полупрозрачного изображения png

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

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

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

RGBA

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

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

background-color: rgba(r, g, b, a);

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

<!-- html -->
<body>
  <div class="text">
    При применении полупрозрачности фона с помощью свойства background-color: rgba (r, g, b, a) нет необходимости замены изображений. Цвет и уровень прозрачности изменяются в параметрах.
  </div>
</body>
/* css */
body {
  background: url(/fon.png);
}
.text {
  padding: 9px;
  background-color: rgba(127, 255, 212, 0.5);
  margin: 0 auto;
  width: 55%;
}
Полупрозрачный фон с применением css свойства background-color: rgba();

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

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

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

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

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

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

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

<!-- html -->
<body>
  <div class="text">
    Клетчатое полупрозрачное изображение применялось для фона когда не было возможности использования привычных сейчас методов.
  </div>
</body>
/* css */
body {
  background: url(/fon.png);
}
.text {
  padding: 9px;
  background: url(/fon_checkered.png);
  margin: 0 auto;
  width: 55%;
}

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

Выводы

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

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

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

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *