CODEWITHSUNDEEP
css
Matt M
Matt M

Reputation: 131

CSS - Inheritance of opacity value with DIV inside DIV

How can I prevent the opacity level on the parent DIV from becoming the limit for the child DIV?

 <div style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: .50; z-index: 1000; background-color:red;">
                            <div style="opacity:1; margin-top:25%; color:white;">
                                <apex:pageMessages />    
                            </div>
                        </div>

Right now the child DIV will only go to a max of 50%.

Upvotes: 0

Views: 118

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

Use rgba for the background color of the parent (and remove the opacity property completely). This allows to set transparency to the background color only, and not the actual element.

So instead of 

background-color:red;

use

background-color:rgba(255,0,0,0.5);

Upvotes: 1

Related Questions