Как сделать картинку полупрозрачной в css

Чтобы сделать картинку полупрозрачной в CSS, можно использовать свойство opacity. Это свойство принимает значения от 0 (полностью прозрачный элемент) до 1 (непрозрачный элемент).

Например, если вы хотите сделать картинку на 50% прозрачной, то нужно задать свойство opacity: 0.5;. Но важно помнить, что это свойство снижает прозрачность всех элементов внутри контейнера, поэтому оно может повлиять на прозрачность других элементов.

Чтобы избежать этой проблемы, можно использовать свойство background-color для контейнера с картинкой и задавать для него прозрачный цвет, используя функцию rgba(). Например, следующий код сделает картинку на 50% прозрачной без влияния на прозрачность других элементов:

.container {
  background-color: rgba(255, 255, 255, 0.5); /* прозрачный белый цвет */
}

img {
  opacity: 0.5; /* уменьшаем прозрачность картинки */
}

Здесь мы задали прозрачный белый цвет для заднего фона контейнера, используя функцию rgba(), которая принимает 4 значения: красный, зеленый и синий цвета в диапазоне от 0 до 255, и прозрачность в диапазоне от 0 до 1. Для картинки мы установили свойство opacity: 0.5;, чтобы сделать ее на 50% прозрачной.

Таким образом, используя свойство opacity или задавая прозрачный цвет фона контейнера с помощью функции rgba(), можно легко сделать картинку полупрозрачной в CSS.