Прозрачность фона на CSS

15.02.2019 at 12:09

Если грамотно реализовать на сайте прозрачность фона, страницы будут выглядеть очень эффектно. Важно использовать картинку, а не однотонный цвет. В последнем случае полупрозрачности как таковой не будет, только более блеклый тон.
Существует множество способов реализовать в CSS прозрачность фона. Это и использование PNG изображения, и создание клетчатой картинки, и применение свойства opacity.

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

Сначала необходимо создать полупрозрачный фоновый рисунок в графическом редакторе, а потом сохранить его в формате PNG-24. После этого просто применяем свойство background-image.
Пример кода:

.classname {
  background-image: url(opacity.png); /* Полупрозрачный фон */
}

Этот метод плохо работает в InternetExplorer версии 6 и ниже. Чтобы реализовать прозрачность PNG, необходимо воспользоваться специальными скриптами. Этот способ имеет некоторые ограничения:

  1. Если в браузере отключить картинки, фоновое изображение пропадет.
  2. Если требуется изменить прозрачность фона, придется переделать картинку.
  3. Нельзя менять прозрачность методами JS. Также невозможно к такому фону применять анимацию, напрямую изменяющую прозрачность.

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

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

Свойство opacity

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

.test {
  opacity: 0.7; /* Полупрозрачный фон */
  filter: alpha(Opacity=70); /* Прозрачность в IE */
}

Свойство filter: alpha(Opacity=70) реализуется для поддержки старых версий InternetExplorer. Для полной совместимости необходимо указывать оба свойства. Плюс этого метода в том, что можно гибко управлять прозрачностью элемента средствами JS или CSS. Например, можно сделать элемент просвечивающимся при наведении с помощью псевдоселектора :hover.

.test:hover {
  opacity: 0.7; /* Полупрозрачный фон */
  filter: alpha(Opacity=70); /* Прозрачность в IE */
}
Tags: