opacity

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство 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. И всё равно будет работать 🧙‍♀️

На практике

Секция статьи "На практике"

Алёна Батицкая советует

Секция статьи "Алёна Батицкая советует"

🛠 Очень частый кейс — сделать полупрозрачную заливку поверх картинки. Это обычно называют оверлеем или вуалью. В этом случае не стоит применять свойство opacity, работайте с полупрозрачными цветами с альфа-каналом.

Например, так:

        
          
          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; */
}

        
        
          
        
      

🛠 Когда-то была популярна шутка, что если ваш заказчик не заплатил вам, то его можно шантажировать следующим способом: цепляете на сайт скрипт, который будет каждый день уменьшать opacity для body на 0.1 пока сайт полностью не пропадёт или пока заказчик не заплатит 😬

Если что, это не я вам рассказала 🤫