CODEWITHSUNDEEP
css
Ankpro Two
Ankpro Two

Reputation: 11

show content over the opacity in css

I have applied opacity in my wrapper class and I want to show the loading image on my page. The loading image is placed inside the wrapper with opacity adjusted. Due to this, the loading image is not showing clearly. I want to show the loading image clearly, without opacity. Would someone please let me know how I could do it?

 #wrapper{
     opacity:0.21;
     width:100%;
     height:100%;
 }
 #loading{ 
     background-image:url('loading.gif');
     width:200px;  
     height:20px;
     z-index:10px;
     position:fixed;
     top:50%;
     left:50%;
 }

Upvotes: 0

Views: 268

Answers (2)

harrypujols
harrypujols

Reputation: 2284

Everything within #wrapper will inherit the opacity you assigned, not matter its position. This is probably what you're doing:

<!-- #loading will have the same opacity of its parent element -->
<div id="wrapper">
  <div id="loading"></div>
</div>

You must put the tags of the #loading element out of the #wrapper element.

<!-- #loading and #wrapper will have their own separate opacity -->
<div id="loading"></div>
<div id="wrapper"></div>

Upvotes: 1

bfavaretto
bfavaretto

Reputation: 71918

If your background is a solid color, use an rgba background-color instead of opacity:

background-color: rgba(255, 255, 255, 0.21); /* white, 0.21 opacity */

The results of the above will be that only the background of your element will be 21% opaque, not the element's contents.

Upvotes: 2

Related Questions