Reputation: 148694

Can't override the opacity value?

I have a fixed div overlay (whole screen) which contain another smaller centered div for a message.

The big div has position:fixed and opacity.

The inner div also has position:fixed but without opacity

But in the inner div , I don't want to have any transparency.(opacity: 1) :

Problem:

I still see it as transparent. How can I fix it ( the inner div) ?

enter image description here

the inner div background-color is black. and the color is red. and (as you can see) it is not what is happening. ( I also tried !important)

the overlay div and inner div should not be scrolled when user scrolls.

Upvotes: 0

Answers (3)

Reputation: 15686

Just put the non-opacity div outside of the div with opacity.

It has position:fixed so I doesn't matter where you put it.

Upvotes: 3

Reputation: 444

Keep two different divs, one with less opacity and other without.

<div parent>
    <div with opacity></div>
    <div without opacity></div>
</div>

Upvotes: 0

Reputation: 3197

You could make the background color transparant by using background-color: rgba(0,0,0,0.5)

Upvotes: 2