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	Значение элемента наследуется от родительского элемента.