How to have a normal <h2> and input fields with parent opacity? [duplicate]

Question

I'm trying to have the parent background have an opacity of 0.5, but everything within it also has an opacity. Here's my HTML:

<div class="rightContainer">
    <div class="blah">
        <h2>SPEAK TO AN EQUITY BUILD<BR>FINANCE PROFESSIONAL</h2>
    </div>

    <div class="Registration">
    <form>

    <div class="form-group">
        <label for="exampleInputEmail1">Full Name</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Full Name" name="muverName">
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Phone Number</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Phone Number" name="muverPhone">
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" name="muverEmail">
        <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Your Location</label>
        <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Your Location" name="muverLocation">
        <small id="emailHelp" class="form-text text-muted">This is used to determine if you're located within a nearby operational area.</small>
     </div>

     <br>

     <button type="submit" class="btn btn-primary muveRegistrationButton">APPLY</button>
</form>
</div>

And the corresponding CSS:

.rightContainer {
    float: right;
    margin-right: 9%;
    border-radius: 8px;
    width: 45%;
    height: 70%;
    margin-left: 8%;
    opacity: 0.5;
    background-color:rgba(255,255,255,.4);
}

.rightContainer headerText {
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

.blah h2 {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color: #00ccff;
    font-size: 120%;
    margin-top: 3%;
    margin-left: 15%;
    margin-right: 15%;
}

I've saw other 'possible' solutions, mainly using two divs but that didn't work for me. Whats the best way to accomplish what I'm trying to do? Here's an image of my output:

Answer 1

I think you can just get rid of the opacity: 0.5 on your container and use an rgba() background attribute with 0.5 for the a value.

.rightContainer {
    ...
    background-color: rgba(255, 255, 255, .5);
}

Answer 2

div.rightcontainer * {
opacity: 1;
}

The asterisk should select all child elements of the rightcontainer and make them opacity 1 again.

If not, then you can set the opacity back to 1.0 manually on each of the child elements.