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

Для управления прозрачностью фона в CSS есть два инструмента - opacity и rgba. Основное отличие этих инструментов в том, что rgba можно применить точечно, к конкретному элементу, opacity же влияет и на дочерние теги в том числе.

Исходный HTML документ:

<div class="block1"></div>
<div class="block2"></div>

CSS:

div{
  width: 300px;
  height: 300px;
  /* Расположим оба блока друг над другом, чтобы показать эффект прозрачности */
  position: absolute;
  top: 20px;
  left: 20px;
}

.block1 {
  /* фон первого блока - картинка */
  background-image: url('1.jpg');
}

.block2 {
  /* второй блок сделаем меньше для наглядности */
  width: 200px;
  height: 200px;
  /* Вариант №1 */
  /* background-color: red; */
  /* opacity: 0.7;   */

  /* Вариант №2  */
  background-color: rgba(255, 0, 0, 0.7);
}

Результат: