<div class="box">Hello, World!</div>

.box {
  background-color: blue;
  opacity: 0.5;
}

с классом «box». Код CSS устанавливает синий цвет фона поля и применяет непрозрачность 0,5. Это означает, что блок будет полупрозрачным, позволяя частично просвечивать содержимое за ним.

Вот еще несколько методов, связанных с непрозрачностью CSS:

1. Использование значений RGBA:

   .box {
   background-color: rgba(0, 0, 255, 0.5);
   }

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

2. Переходная непрозрачность:

   .box {
   transition: opacity 0.3s ease;
   }
   .box:hover {
   opacity: 0.7;
   }

   Этот метод добавляет эффект плавного перехода к свойству непрозрачности. При наведении курсора на поле непрозрачность постепенно меняется от исходного значения до нового значения, создавая эффект затухания.

3. Сочетание непрозрачности с другими свойствами CSS:

   .box {
   background-color: blue;
   opacity: 0.5;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   }

   Этот метод демонстрирует, как непрозрачность можно комбинировать с другими свойствами CSS, такими как border-radius и box-shadow, для создания визуально привлекательных эффектов.