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

Влад Мержевич

Часткова прозорість в дизайні сайту виглядає дуже ефектно, якщо використовувати її правильно. Головне, щоб під напівпрозорими блоками було не однотонне зображення, а саме зображення, в цьому випадку прозорість стає помітною. Такий ефект досягається різними способами, включаючи використання PNG-зображення як фону, створення клітчастого зображення та властивість opacity. Проте, при потребі зробити фон блоку напівпрозорим, ці методи мають свої недоліки. Подивимося на це докладніше для більшого розуміння, а також для тих читачів, які не знайомі з нетрадиційними способами створення ефекту напівпрозорості.

PNG як фон

У графічному редакторі попередньо підготовлюється однотонне напівпрозоре зображення, яке зберігається у форматі PNG-24 (рис. 1). Особливістю цього формату є підтримка 256 рівнів прозорості, тобто він може відображати напівпрозорі картинки.

Після цього додаємо зображення як фон через властивість background, як показано у прикладі 1.

Приклад 1. Використання напівпрозорого зображення

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Прозорність в шарі</title>
  <style type="text/css">
  BODY {
  background: url(images/star.png); /* Фонове зображення */
  }
  .semiopacity {
  padding: 5px; /* Поля навколо тексту */
  background: url(images/opacity.png); /* Напівпрозорий фон */
  }
  </style>
  </head>
  <body>
  <div class="semiopacity">
  Магнітне поле, це вдалося встановити за характером спектра, відстежує 
  космічний метеорит, день цей припав на двадцять шосте 
  число місяця карнея, який у афінян називається метагітніоном.
  </div>
  </body>
</html>

Результат цього прикладу показано на рис. 3.

Старий браузер Internet Explorer 6 не підтримує напівпрозорість в PNG-24, якщо з якихось причин необхідно підтримувати цей браузер, для нього доведеться використовувати скрипти.

Представлений метод має ряд обмежень. Так, при вимкненні зображень у браузері, фон зникне зовсім. Крім того, не так легко змінити колір фону та значення прозорості, для цього доведеться знову редагувати зображення.

Клітчасте зображення

Цей метод належить до дуже старих способів реалізації напівпрозорості, коли браузери "нічого не вміли", і доводилося шукати нетипові рішення. Суть полягає в створенні зображення, в якому чергуються прозорі та непрозорі пікселі (рис. 3). Така регулярна структура створює ефект напівпрозорості, по суті імітуючи його.

Ось як це виглядає в кінцевому результаті (рис. 4).

Недоліки цього методу подібні до попереднього, також може виникнути муаровий візерунок і відбувається погіршення тексту.

Властивість opacity

Властивість CSS 3 opacity встановлює значення прозорості і варіюється від 0 до 1, де нуль це повна прозорість елемента, а одиниця, навпаки, непрозорість. У властивості opacity є особливість — прозорість поширюється на всі дочірні елементи, і вони не можуть перевищувати значення прозорості свого батька. Виходить, що непрозорий текст на напівпрозорому фоні бути не може (приклад 2).

Приклад 2. Використання opacity

XHTML 1.0CSS 2.1CSS 3IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Прозорність в шарі</title>
  <style type="text/css">
   BODY {
    background: url(images/star.png); /* Фонове зображення */
   }
   .semiopacity {
    background: #0078c9; /* Колір фону */
    padding: 5px; /* Поля навколо тексту */
    opacity: 0.7; /* Напівпрозорий фон */
    filter: alpha(Opacity=70); /* Прозорість в IE */
    color: #fff; /* Колір тексту */
   }
  </style>
 </head>
 <body>
  <div class="semiopacity">
   Магнітне поле, це вдалося встановити за характером спектра, відстежує 
   космічний метеорит, день цей припав на двадцять шосте 
   число місяця карнея, який у афінян називається метагітніоном.
  </div>
 </body>
</html>

Результат прикладу показано на рис. 5.

У Internet Explorer до версії 8.0 включно opacity не працює, тому для нього використовується специфічна для цього браузера властивість filter. Звісно, це призводить до невалідного CSS-коду.

RGBA

Сучасний підхід набагато простіший і наочніший, ніж вищезгадані методи і полягає в використанні для кольору та фону формату RGBA. Перші три букви знайомі багатьом і розшифровуються як червоний, зелений, синій, остання символізує альфа-канал і задає прозорість елемента. Формат запису такий.

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

У дужках замість літер ставиться значення компонента кольору, його можна побачити у будь-якому графічному редакторі, останнє ж значення встановлює прозорість і збігається зі значенням властивості opacity.

Не всі браузери підтримують такий формат: Internet Explorer починаючи з версії 9, Opera з версії 10, Firefox з 3, Safari з 3.2. Проте в цілому, сучасні браузери коректно відображають прозорість. Для старих версій IE можна окремо вказати колір у звичайному для нього форматі, при цьому, звісно, жодної прозорості не буде. Або знову скористатися властивістю filter, але тоді доведеться погодитися, що прозорість також торкнеться й тексту (приклад 3). Щоб дотриматися валідного CSS-коду, я скористався умовними коментарями.

Приклад 3. Використання RGBA

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Напівпрозорий фон</title>
  <style>
   body {
    background: url(images/star.png); /* Фон веб-сторінки */
   }
   .transparent {
    background-color: rgba(0, 120, 201, 0.7); /* Колір фону та значення прозорості */
    padding: 10px; /* Поля навколо тексту */
    color: #fff; /* Колір тексту */
   }
  </style>
  <!--[if lt IE 9]>
  <style type="text/css">
   .transparent {
    background-color: #0078c9;
    filter: alpha(Opacity=70); /* Прозорість в IE */
   }
  </style>
  <![endif]-->
 </head>
 <body>
  <div class="transparent">
    Гігантське зіркове спіраль з діаметром у 50 кпс, 
    це вдалося встановити за характером спектра, чудово ілюструє метеорний
    дощ, тим не менш, Дон Еманс включив до списку всього 82 Великі Комети.
  </div>
 </body>
</html>

Результат прикладу можна побачити на рис. 6.

Порівняйте зображення з попереднім, букви стали яскравішими та чіткішими.

У браузері Internet Explorer 7 виявився баг при поєднанні background-color з різними значеннями. Наприклад, якщо задати колір фону червоним, як показано нижче, то фон в IE7 взагалі не відобразиться.

div {
  background-color: red; /* В IE7 не застосовується */
  background-color: rgba(255, 0, 0, 0.5);
}

Вирішується це заміною властивості background-color на background.

div {
 background: red; /* Це працює */
 background: rgba(255, 0, 0, 0.5);
}
Однак тут є один нюанс. Валідатор CSS "

Часті запитання