freeCodeCamp/guide/russian/css/background-opacity/index.md

69 lines
2.7 KiB
Markdown
Raw Normal View History

2018-10-12 20:00:59 +00:00
---
title: Background Opacity
localeTitle: Непрозрачность фона
---
## Непрозрачность фона
Свойство прозрачности (opacity) указывает на прозрачность/непрозрачность элемента, то есть на степень видимости содержимого за элементом.
2018-10-12 20:00:59 +00:00
Свойство прозрачности может принимать значение от 0.0 до 1.0. Чем ниже значение, тем больше прозрачность:
2018-10-12 20:00:59 +00:00
Подробнее [здесь](https://www.w3schools.com/css/css_image_transparency.asp)
Вы можете выбрать насколько вы хотите сделать элемент прозрачным. Для достижения уровня прозрачности вам необходимо добавить следующее свойство CSS.
2018-10-12 20:00:59 +00:00
**Полностью непрозрачный**
```css
.class-name {
opacity:1;
}
OR
.class-name {
opacity:1.0;
}
```
**Полупрозрачный**
2018-10-12 20:00:59 +00:00
```css
.class-name {
opacity:0.5;
}
Opacity value can be anything between 0 and 1;
```
**Прозрачный**
2018-10-12 20:00:59 +00:00
```css
.class-name {
opacity:0;
}
OR
.class-name {
opacity:0.0;
}
```
В качестве альтернативы вы можете использовать прозрачное значение rgba следующим образом:
2018-10-12 20:00:59 +00:00
```css
.class-name{
background-color: rgba(0,0,0,.5);
}
```
В приведенном выше примере, фон имеет черный цвет с прозрачностью 50%. Приведенный выше пример указывает, что фон имеет черный цвет с непрозрачностью 50%. Последним значением значения rgba является альфа-значение. Значение альфа 1 равно 100%, а 0.5 (.5 для краткости) равно 50%. Мы используем этот метод для добавления прозрачности к элементу, не затрагивая содержимое внутри.
2018-10-12 20:00:59 +00:00
[Пример кода для отображения диапазонов непрозрачности фона](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)