CSS непрозрачность фона [дублирование]

Дети наследуют прозрачность от своих родительских элементов. Было бы странно и неудобно, если бы это не так.

Вы можете использовать полупрозрачный PNG-файл для фонового изображения или использовать цвет RGBa (где 'a' — это альфа) для фонового цвета.

Пример: полупрозрачный черный фон с 50% непрозрачностью:

<div style="background-color:rgba(0, 0, 0, 0.5);">
   <div>
      Добавленный текст.
   </div>
</div>

Таким образом, текст внутри внутреннего блока будет четким на фоне полупрозрачного черного цвета.

Я бы сделал что-то вроде этого:

<div class="container">
  <div class="text">
    <p>текст ура!</p>
  </div>
</div>

CSS:

.container {
    position: relative;
}

.container::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/path/to/image.png');
    opacity: .4;
    content: "";
    z-index: -1;
}

Это должно сработать. Предполагается, что вам требуется полупрозрачное изображение, а не цвет, в таком случае лучше использовать rgba. Также предполагается, что вы не можете изменить прозрачность изображения заранее в Photoshop.

Ваш CSS-класс .transbg используется для создания полупрозрачного фона. Вот перевод и объяснение его свойств:

.transbg {
  /* Запасной вариант для веб-браузеров, которые не поддерживают RGBa */
  background-color: rgb(0, 0, 0); /* Черный цвет в формате RGB */
  
  /* RGBa с 0.6 прозрачностью */
  background-color: rgba(0, 0, 0, 0.6); /* Полупрозрачный черный цвет */
  
  /* Для IE 5.5 - 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* Градиентный фильтр для старых версий IE */
  
  /* Для IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* Также фильтр для IE версии 8 */
}

В этом коде определяются два варианта фона: полный черный для браузеров, не поддерживающих RGBA, и полупрозрачный черный с использованием RGBA. Также предусмотрены фильтры для старых версий Internet Explorer, чтобы достичь желаемого эффекта.

Чтобы добиться правильного наложения элементов, убедитесь, что ширина и высота для элемента "foreground" совпадают с размерами элемента "background". Либо попробуйте использовать параметры верхнего, нижнего, левого и правого отступов.

Вот пример кода:

<style>
    .foreground, .background {
        position: absolute;
        width: 100%; /* или установите конкретную ширину */
        height: 100%; /* или установите конкретную высоту */
    }
    .foreground {
        z-index: 1;
    }
    .background {
        background-image: url(your/image/here.jpg);
        opacity: 0.4;
    }
</style>

<div class="background"></div>
<div class="foreground"></div>

Таким образом, элементы будут корректно перекрывать друг друга.