CSS Позиционирование и непрозрачность изображений в контейнере

Question

У меня есть html страница, которая использует изображение в качестве всего фона. В верхней части этого фонового изображения у меня есть белая коробка с текстом внутри и 3 изображения. Я хочу, чтобы белая коробка была видна сквозь, чтобы фоновое изображение все еще было видно. Но когда я изменяю непрозрачность для indexpagecontainer, непрозрачность для изображений также изменяется. Есть ли способ предотвратить это? Я также хочу, чтобы изображения даже помещались в контейнер, который у меня есть. Я не уверен, как это сделать, не используя поля и отступы для всех них. Есть ли более простой способ сделать это? Вот мой код:

HTML - index.html

#indexpagecontainer {
  text-align: center;
  background-color: #ffffff;
  margin: 20px;
  padding: 10px;
}

#img1 {
  float: left;
  height: 190px;
  width: 250px;
  margin: 20px;
}

#img2 {
  float: left;
  height: 90px;
  width: 50px;
  margin: 20px;
}

#img2 {
  float: left;
  height: 600px;
  width: 50px;
  margin: 20px;
}

<div id="indexpagecontainer">

  <p id="abouttext">TEXT HERE</p>

  <img id="img1" src="images/orange.png">

  <img id="img2" src="images/apple.png">

  <img id="img2" src="images/banana.png">
</div>

Answer 1

Вы должны добавить этот фон к фону css элемента: rgba (255, 255, 255, 0.5):

#indexpagecontainer{
    text-align: center;
    background: rgba(255, 255, 255, 0.5);
    margin: 20px;
    padding: 10px;
}