CSS свойство opacity

Свойство opacity определяет уровень прозрачности элемента. Opacity - это противоположный эффект прозрачности.

Это свойство дает возможность сделать элемент полностью или частично прозрачным.

Свойство принимает значения в диапазоне от 0 до 1. Значение по умолчанию равно 1, при котором элемент становится полностью непрозрачным. Значение 0 делает элемент полностью прозрачным.

Значения между 0 и 1 делают элемент полупрозрачным.

Отрицательные значения допустимы.
Когда добавляем прозрачность к фону элемента при помощи свойства opacity, все дочерние элементы тоже становятся прозрачными. Используйте цветовые коды RGBA если не применяйте свойство opacity для дочерних элементов.
Значение по умолчанию 1.0
Применяется Ко всем элементам.
Наследуется Нет
Анимируемое Да
Версия CSS3
DOM синтаксис object.style.opacity = "0.3";

Синтаксис

opacity: number | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .example1 {
      background-color: #8ebf42;
      opacity: 0.3;
      filter: Alpha(opacity=50); 
      }
      .example2 {
      background-color: #8ebf42;
      opacity: 1;
      filter: Alpha(opacity=50); 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства opacity</h2>
    <h3>Opacity level is 0.3;</h3>
    <div class="example1">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</div>
    <h3>Opacity level is 1;</h3>
    <div class="example2">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн.</div>
  </body>
</html>

Пример, где уровень прозрачности первого изображения равен 1.0, у второго изображения прозрачность равна 0.6, а у третьего - 0.2:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      img.a{
      opacity: 1;
      filter: alpha(opacity=100); 
      }
      img.b{
      opacity: 0.6;
      filter: alpha(opacity=100); 
      }
      img.c{
      opacity: 0.2;
      filter: alpha(opacity=100); 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства opacity</h2>
    <h3>Opacity: 1.0;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="a">
    <h3>Opacity: 0.6;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="b">
    <h3>Opacity: 0.2;</h3>
    <img src="/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg"
      alt="house" width="300" height="300"
      class="c">
  </body>
</html>

Значения

Значение Описание
number Устанавливает уровень прозрачности. Значение по умолчанию - 1.0.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
4.0+ 12.0+ 2.0+ 3.1+ 10.0+

Практикуйте свои знания

В каком диапазоне задаются значения для свойства CSS 'opacity'?
Считаете ли это полезным?