mur7ay mur7ay - 2 months ago 5x
CSS Question

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

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">

<div class="Registration">

<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 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 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 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>


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

And the corresponding CSS:

.rightContainer {
float: right;
margin-right: 9%;
border-radius: 8px;
width: 45%;
height: 70%;
margin-left: 8%;
opacity: 0.5;

.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:

enter image description here


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);