opacity

Свойство opacity управляет прозрачностью элемента. С его помощью можно полностью спрятать текст или элемент. А можно сделать полупрозрачным — дизайнеры любят такой приём на современных сайтах.

Элемент станет прозрачным:

        
          
          .selector {  opacity: 0;}
          .selector {
  opacity: 0;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элемент полупрозрачный, сквозь него видно фон:

        
          
          .selector {  opacity: 0.5;}
          .selector {
  opacity: 0.5;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Элемент совсем непрозрачный:

        
          
          .selector {  opacity: 1;}
          .selector {
  opacity: 1;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Свойство opacity принимает дробные или целые значения от 0 до 1 включительно. 0 будет означать полную прозрачность, а 1 полную непрозрачность (значение по умолчанию).

Можно представить, что 0 равен 0% видимости элемента, а 1 в свою очередь 100% видимости элемента. Указывая любые промежуточные значения вы гибко управляете видимостью.

Стоит быть внимательным с этим свойством: невидимый элемент всё равно остаётся на странице и продолжает влиять на поток документа. Грубо говоря, если вы скроете какой-то блок при помощи opacity, то он просто будет невидим, но не перестанет занимать своё место, его соседи не займут его место, а родитель не схлопнется, если это был единственный ребёнок.

Представьте, что элемент просто надевает Мантию-невидимку как у Гарри Поттера.

💡 Свойство прозрачности можно анимировать 🎉

💡 Элемент не пропадает со страницы, продолжает влиять на поток документа.

💡 Можно задавать любые дробные значения. Например, 0.33 или 0.1.

💡 Это не наследуемое свойство. НО! Если родителю задано это свойство, то и все дети вместе с ним будут становиться прозрачными.

💡 Вместо opacity: 0 можно использовать свойство visibility: visibility: hidden — будет тот же результат.

💡 В дробных значениях можно опустить первый ноль: opacity: .5. И всё равно будет работать 🧙‍♀️

        
          
          selector {  position: relative;}selector:before {  content: "";  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgb(0 0 0 / 0.5);  /* или в формате HEX  background-color: #00000080; */}
          selector {
  position: relative;
}

selector:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(0 0 0 / 0.5);
  /* или в формате HEX
  background-color: #00000080; */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать