62 lines
2.5 KiB
Markdown
62 lines
2.5 KiB
Markdown
|
---
|
|||
|
|
title: Background Opacity
|
|||
|
|
localeTitle: Непрозрачность фона
|
|||
|
|
---
|
|||
|
|
## Непрозрачность фона
|
|||
|
|
|
|||
|
|
Свойство opacity указывает непрозрачность / прозрачность элемента, то есть степень видимости содержимого за элементом.
|
|||
|
|
|
|||
|
|
Свойство opacity может принимать значение от 0.0 до 1.0. Чем ниже значение, тем прозрачнее:
|
|||
|
|
|
|||
|
|
Подробнее [здесь](https://www.w3schools.com/css/css_image_transparency.asp)
|
|||
|
|
|
|||
|
|
Вы можете выбрать, насколько вы хотите сделать элемент прозрачным. Для достижения уровня прозрачности вам необходимо добавить следующее свойство CSS.
|
|||
|
|
|
|||
|
|
**Полностью непрозрачный**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.class-name {
|
|||
|
|
opacity:1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
OR
|
|||
|
|
|
|||
|
|
.class-name {
|
|||
|
|
opacity:1.0;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**полупрозрачный**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.class-name {
|
|||
|
|
opacity:0.5;
|
|||
|
|
}
|
|||
|
|
Opacity value can be anything between 0 and 1;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**прозрачный**
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
.class-name {
|
|||
|
|
opacity:0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
OR
|
|||
|
|
|
|||
|
|
.class-name {
|
|||
|
|
opacity:0.0;
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
В качестве альтернативы вы можете использовать прозрачное значение rgba следующим образом: \`\` \`CSS
|
|||
|
|
|
|||
|
|
.class имя { background-color: rgba (0,0,0, .5); } \`\` \` Приведенный выше пример устанавливает, что фон имеет черный цвет с непрозрачностью 50%. Последним значением значения rgba является альфа-значение. Значение альфа 1 равно 100%, а 0,5 (0,5 для коротких) - 50%. Мы используем этот метод для добавления прозрачности к элементу, не затрагивая содержимое внутри.
|
|||
|
|
|
|||
|
|
[Пример кода для отображения диапазонов непрозрачности фона](https://codepen.io/lvcoulter/full/dVrwmK/)
|
|||
|
|
|
|||
|
|
#### Дополнительная информация:
|
|||
|
|
|
|||
|
|
Для получения дополнительной информации посетите [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) [Свойство CSS прозрачности в CSS-трюках](https://css-tricks.com/almanac/properties/o/opacity/)
|
|||
|
|
|
|||
|
|
Поддержка браузера: [caniuse](https://caniuse.com/#search=opacity)
|