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>