Make Flexbox background opaque but not content

Question

I have a flexbox in html and want it to make opaque but not the content of the flexbox

    <div class="flex-container">
  <div style="flex: 0 0 400px">1</div>
  <div style="flex: 0 0 200px">2</div>
  <div style="flex: 0 0 200px">3</div>
  <div style="flex: 0 0 200px">4</div>
    </div>

my css looks like this:

.flex-container {
  display: flex;
  align-items: stretch;
}

.flex-container>div {
  background-color: #4c000000;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;

}

Answer 1

You can use rgba as your 'background', the 4th argument (.2) is your opacity level.

.flex-container>div {
  background: rgba(25, 25, 25, .2);
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}