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

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:

score 2 · Accepted Answer · answered Aug 05 '16 at 13:54

2

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

answered Aug 05 '16 at 13:54

TW80000

1,507
1
11
18

Awesome, thanks! I'll accepted this answer once SO lets me. – mur7ay Aug 05 '16 at 13:58

score 1 · Answer 2 · answered Aug 05 '16 at 13:54

1

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.

answered Aug 05 '16 at 13:54

RussAwesome

464
5
18

Thanks for your input! I wish I could accept them all. – mur7ay Aug 05 '16 at 13:59

score 1 · Answer 3 · answered Aug 05 '16 at 13:54

1

Use background color instead of opacity:

background-color:rgba(300,300,300,0.5);

answered Aug 05 '16 at 13:54

Jonas Wilms

132,000
20
149
151

Thanks for your input! I wish I could accept them all. – mur7ay Aug 05 '16 at 13:59

score 1 · Answer 4 · answered Aug 05 '16 at 13:57

1

Use this:

 background:rgba(255,255,255,0.5);

answered Aug 05 '16 at 13:57

Abhishek Pandey

13,302
8
38
68

Thanks Abhishek! Your input is appreciated. – mur7ay Aug 05 '16 at 13:59
@mur7ay Any time!! – Abhishek Pandey Aug 05 '16 at 14:01

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

and input fields with parent opacity?

4 Answers4

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