CODEWITHSUNDEEP
css
StudioTime
StudioTime

Reputation: 23999

Inheriting opacity even after resetting

I have a 'floating' fixed position div which is shown onclick of a label. Within the fixed div is a form button.

Now, because its possible that the div could be shown anywhere on a page, and as a user scrolls the page under it, I give it an opacity of say 0.8. But, I still want the button inside the div at full opacity (1) but its not resetting the button opacity.

Here's the css

#delHolder { 
width:280px; 
text-align:center; 
position:fixed; 
background:#fff; 
opacity:0.8; 
height:60px; 
top:150px; 
left:50%; 
margin-left:-140px; 
z-index:2322;  
border-radius:8px;
}

#multiDel { position:relative; z-index:232323; opacity:1.0; }

.className { opacity:1.0; }

html is something like:

<div id="delHolder"><input type="submit" class="className" id="multiDel"></div>

How can I only have transparency on holder div?

Upvotes: 0

Views: 52

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

instead of

opacity:0.8;
background: #fff;

use

background-color: rgba(255, 255, 255, 0.8);

In this way the opacity applied on the parent won't be inherited from children.
Note: rgba() won't work on IE<=8

Upvotes: 1

Related Questions