skip to main content

opacity

css

Кратко 🔗

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

Пример 🔗

.selector {
opacity: 0; /* элемент станет прозрачным */
}

.selector {
opacity: 0.5; /* элемент полупрозрачный, сквозь него видно фон */
}

.selector {
opacity: 1; /* элемент совсем не прозрачный */
}

Как пишется 🔗

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

Как это понять 🔗

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

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

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

Подсказки 🔗

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

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

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

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

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

  • [ ] Добавить ссылку на статью про visibility

💡 В дробных значениях можно опустить первый ноль: 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; */

}

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

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

Автор: Алёна,