Themes

Opacity isolation for page.

Permalink February 03, 2010 at 5:13 PM

I'm trying to make the #page in my CSS theme have an opacity of "x". When i do this, everything appearing on the #page (text, image, nav, etc) takes on the same opacity.

Anyone know how to isolate the opacity to just the #page?

Thanks in advance!

SuperNova replied on Feb 4, 2010 at 6:42 pm Permalink Reply

something like this? (using two layers):

<body>
<style type="text/css">
body {
   color: red;
   font-weight: bold;
   text-align: center;
}
p.p1 {
   margin: 40px 0;
}
p.p2 {
   margin: 110px 0;
}
#wrapper {
   width: 400px;

Viewing 15 lines of 44 lines. View entire code block.

 
<body>
<style type="text/css">
body {
   color: red;
   font-weight: bold;
   text-align: center;
}
p.p1 {
   margin: 40px 0;
}
p.p2 {
   margin: 110px 0;
}
#wrapper {
   width: 400px;
   margin: 0 auto;
   margin-top: 100px;
}
#page {
   position: absolute;
   width: 400px;
   height: 200px;
   background: none;
   filter:alpha(opacity=100);
    opacity: 1;
}
#page_opacity {
   position: absolute;
   width: 400px;
   height: 200px;
   background: url(bg.jpg);
    filter:alpha(opacity=30);
    opacity: 0.3;
}
</style>
 
<div id="wrapper">
   <div id="page_opacity">
       <p class="p1">full red with opacity<br />(#page_opacity)</p>
   </div>
   <div id="page">
      <p class="p2">full red but no opacity<br />(#page)</p>
   </div>
</div>
</body>

SamS replied on Feb 4, 2010 at 11:52 pm Permalink Reply

sorry, should have clarified more.

i have a background image located in the #body. I am wanting the #page to have an opacity without all the text, photos, nav, etc that appear on the #page also having an opacity.

SamS replied on Feb 7, 2010 at 12:25 am Permalink Reply

never mind, i figured out a way to fix my problem. thanks for your help anyways!

Sam

SuperNova replied on Feb 25, 2010 at 12:28 pm Permalink Reply

or just use a PNG with a grade of tranceparency.
background: transparent url(images/mybg.png)

Forums

Themes

Opacity isolation for page.

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?