When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this?
.parent {
display: inline-block;
position:relative;
width: 100%;
border: 2px solid rgb(255, 255, 255);
}
.transbox {
height: 350px;
width: 100%;
background-color: #ffffff;
opacity: 0.4;
display: flex;
justify-content: center;
}
.parent .transbox .search-form {
display: flex;
justify-content: center;
align-items: center;
} <!-- Search form -->
<div class="container py-6 py-lg-7 text-white overlay-content text-center">
<div class="parent">
<div class="transbox">
<div class="search-form" id="id_forms">
<div class="col-lg-4">
{{ search_form.category }}
</div>
<div class="col-lg-4">
{{ search_form.city }}
</div>
<button class="btn btn-primary custom-btn" type="submit"><i class="fas fa-search"></i>Search</button>
</div>
</div>
</div>
</div>