2.7 KiB
title | localeTitle |
---|---|
Background Opacity | Непрозрачность фона |
Непрозрачность фона
Свойство прозрачности (opacity) указывает на прозрачность/непрозрачность элемента, то есть на степень видимости содержимого за элементом.
Свойство прозрачности может принимать значение от 0.0 до 1.0. Чем ниже значение, тем больше прозрачность:
Подробнее здесь
Вы можете выбрать насколько вы хотите сделать элемент прозрачным. Для достижения уровня прозрачности вам необходимо добавить следующее свойство CSS.
Полностью непрозрачный
.class-name {
opacity:1;
}
OR
.class-name {
opacity:1.0;
}
Полупрозрачный
.class-name {
opacity:0.5;
}
Opacity value can be anything between 0 and 1;
Прозрачный
.class-name {
opacity:0;
}
OR
.class-name {
opacity:0.0;
}
В качестве альтернативы вы можете использовать прозрачное значение rgba следующим образом:
.class-name{
background-color: rgba(0,0,0,.5);
}
В приведенном выше примере, фон имеет черный цвет с прозрачностью 50%. Приведенный выше пример указывает, что фон имеет черный цвет с непрозрачностью 50%. Последним значением значения rgba является альфа-значение. Значение альфа 1 равно 100%, а 0.5 (.5 для краткости) равно 50%. Мы используем этот метод для добавления прозрачности к элементу, не затрагивая содержимое внутри.
Пример кода для отображения диапазонов непрозрачности фона
Дополнительная информация:
Для получения дополнительной информации посетите MDN Свойство CSS прозрачности в CSS-трюках
Поддержка браузера: caniuse