Прозрачность opacity

Свойство opacity определяет уровень прозрачности элемента.

Прозрачность изображения

Свойство opacity принимает значение от 0.0 до 1.0. Чем меньше значение, тем прозрачнее элемент:

Forest

opacity 0.2

Forest

opacity 0.5

Forest

opacity 1
(по умолчанию)


img {
  opacity: 0.5;
}

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

Очень часто свойство opacity используется вместе с селектором :hover, чтобы изменять прозрачность элемента при наведении на него мыши:

Northern Lights
Mountains
Italy

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Объяснение примера

Первая CSS декларация аналогична той, что мы приводили в первом примере. Дополнительно к этому, мы добавили то, что должно происходить, когда пользователь наводит на одно из изображений. В данном случае при наведении пользователем мыши, отменяется прозрачность изображения. CSS код для этого - opacity: 1;.

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

Ниже пример с обратным эффектом:

Northern Lights
Mountains
Italy

img:hover {
  opacity: 0.5;
}

Прозрачный блок

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

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1


Пример:


div {
  background-color: green;
  opacity: 0.3;
}

Определение прозрачности при помощи RGBA

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

100% opacity

60% opacity

30% opacity

10% opacity

В главе Как использовать цвета вы узнали, что вы можете использовать RGB как значение цвета. Дополнительно к этому вы можете использовать RGB значение цвета с альфа-каналом (RGBA), который определяет прозрачность цвета.

RGBA значение цвета определяется CSS функцией rgba(red, green, blue, alpha). Параметр alpha - это число от 0.0 (полная прозрачность) до 1.0 (полная непрозрачность).

Подробнее о RGBA цветах вы можете прочитать в главе RGB цвета.

Пример:


div {
  background: rgba(76, 175, 80, 0.3) /* Фон зеленого цвета с 30% прозрачностью */
}

Текст в прозрачном блоке

Это кое-какой текст, размещенный в прозрачном блоке.


<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}

div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}

div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>

<div class="background">
  <div class="transbox">
    <p>Это кое-какой текст, размещенный в прозрачном блоке.</p>
  </div>
</div>

</body>
</html>

Объяснение примера

Сначала мы создаем элемент <div> (class="background") с фоновым изображением и рамкой.

Затем мы создаем еще один элемент <div> (class="transbox") внутри первого элемента <div>.

У элемента <div class="transbox"> есть фоновый цвет и рамка, сам элемент прозрачный.

Внутри прозрачного элемента <div> мы добавили кое-какой текст, обернутый в тег <p>.