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

2.8 KiB
Raw Blame History

title localeTitle
Background Opacity Непрозрачность фона

Непрозрачность фона

Свойство прозрачности (opacity) указывает на прозрачность/непрозрачность элемента, то есть на степень видимости содержимого за элементом.

Свойство прозрачности может принимать значение от 0.0 до 1.0. Чем ниже значение, тем больше прозрачность:

Подробнее здесь

Вы можете выбрать насколько вы хотите сделать элемент прозрачным. Для достижения уровня прозрачности вам необходимо добавить следующее свойство CSS.

Полностью непрозрачный

.class-name { 
  opacity:1; 
 } 
 
 или 
 
 .class-name { 
  opacity:1.0; 
 } 

Полупрозрачный

.class-name { 
  opacity:0.5; 
 } 
 Значение непрозрачности может быть любым от 0 до 1;

Прозрачный

.class-name { 
  opacity:0; 
 } 
 
 или
 
 .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