5 примеров, которые помогут понять, как работает CSS opacity

С помощью свойства CSS opacity можно контролировать CSS прозрачность HTML-элементов веб-страницы, таких как текст, изображения или фон. В данной статье мы расскажем об этом свойстве, а также приведем несколько примеров.

Как работает непрозрачность в CSS

Термин «непрозрачный» используется для описания объектов, которые полностью видимые. На веб-странице непрозрачный элемент имеет значение свойства opacity 1, а полностью прозрачный - opacity, равное 0. По умолчанию все элементы имеют opacity, равное 1.

Значение от 0 до 1 определяет уровень прозрачности элемента. Например, следующий код уменьшит прозрачность CSS наполовину:

div { opacity: 0.5 }

Элемент с непрозрачностью 0 будет полностью невидимым, но он все равно будет занимать физическое пространство на странице. Следовательно, чтобы сделать элемент видимым, нужно использовать в CSS свойство opacity, а также свойство visibility.

opacity было введено в CSS3 и на сегодняшний день хорошо поддерживается браузерами. Если ваш проект требует поддержки Internet Explorer 8 или более ранних версий, то нужно использовать свойство MS alpha filter следующим образом:

div {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

Обратите внимание, что прозрачность фона CSS может задаваться десятичными значениями от 0 до 1, а значения непрозрачности альфа-фильтра - в диапазоне от 0% до 100%.

Управление непрозрачностью родительских и дочерних элементов

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

#parent { opacity: 0.8 }
#child { opacity: 0.5 }

Следующие примеры иллюстрируют, как дочерние элементы влияют на непрозрачность их родителей:

В первом примере для обоих полей задана непрозрачность 1. Во втором примере родительское поле (черное) имеет непрозрачность 0.8, а дочернее (оранжевое) -1. В третьем родительский элемент имеет непрозрачность 0.8, а дочерний – 0.5. Обратите внимание на разницу в цветовом тоне (прозрачности) оранжевого поля во всех трех примерах.

Использование свойства CSS opacity для создания прозрачных изображений

С помощью свойства opacity можно легко добавить прозрачность background CSS к изображениям. Предположим, что мы выводим одно и то же изображение на странице два раза. Следующий код сделает второе изображение прозрачным:

#img1 { opacity: 1 }
#img2 { opacity: 0.6 }

В результате мы получим следующее:

Изменение непрозрачности при наведении курсора мыши

Также можно управлять CSS прозрачностью изображений или других HTML-элементов при наведении курсора мыши. Для этого в предыдущем примере нужно изменить значение свойства opacity. Следующий код сделает изображение прозрачным при наведении на него курсора мыши:

#img1 { opacity: 1 }
#img1:hover { opacity: 0.6 }

<img id="img1" src="image.jpg" />

Использование свойства CSS opacity для фона

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

div {
  opacity: 0.5;
}

Во втором способе необходимо указать значение альфа-канала в RGBA (красный, зеленый, синий, альфа) в объявлении цвета фона. Это делается следующим образом:

div {
  background: rgba(0, 0, 0, 0.5);
}

Изменяя значения R, G и B, можно получить прозрачность background CSS любого цвета. Аналогично можно получить непрозрачные дочерние элементы внутри прозрачных родительских элементов. Как правило, значение непрозрачности родительского элемента выше, чем у дочерних. Тем не менее, с помощью прозрачного фона можно сделать дочерние видимыми, сохраняя при этом прозрачность их контейнера.

Прозрачные рамки с помощью CSS

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

.image-box {
  border: 15px solid rgba(0, 0, 0, 0.5);
}

На этом мы завершаем рассмотрение свойства CSS opacity. Мы привели примеры для различных случаев использования данного свойства, и надеемся, что они помогут вам лучше понять, как оно работает.