HTML text does not appear white

Question

I have html text that is colored white with css. I also have opacity set to 0.5, but that shouldn't change font color. It should stay white.

Is there any fix for this without removing opacity or background colors?

body {
  background: green;
}

.second-b {
  background-image: url(images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: red;
  opacity: 0.5;
  line-height: 300px;
  text-align: center;
}

.color-box-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: white;
  font-size: 22px;
}

<div class="second-b">
  <div class="color-box">
    <div class="color-box-content">Lorem ipsum</div>
  </div>
</div>

Answer 1

If you use opacity on an element it will affect all the items inside it, you can use the opacity on the background-color only

background-color: rgba(255, 0, 0, 0.5);

See code snippet:

body {
  background: green;
}

.second-b {
  background-image: url(images/town.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.color-box {
  width: 100%;
  height: 300px;
  background-color: rgba(255, 0, 0, 0.5);
  line-height: 300px;
  text-align: center;
}

.color-box-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color: white;
  font-size: 22px;
}

<div class="second-b">
  <div class="color-box">
    <div class="color-box-content">Lorem ipsum</div>
  </div>
</div>

Answer 2

opacity Property affect on all his children.

you can use The following attributes :

1)background-color:hsla(0,100%,50%,0.5);

2)background-color:rgba(255,0,0,0.5);

body{
    background: green;
}

.second-b{
    background-image: url(images/town.jpg); 
    background-repeat: no-repeat;
    background-size: cover; 
}

.color-box{
    width:100%;
    height:300px;
    background-color:hsla(0,100%,50%,0.5);
    line-height: 300px;
    text-align: center;
}

.color-box-content{
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  color:white;
  font-size:22px; 
}

<div class="second-b">
    <div class="color-box">
         <div class="color-box-content">Lorem ipsum</div>
    </div>
</div>