[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

How do I make my text show up at 100%?

Here's the css for the div I'm using:

#page_wrap {
width: 1200px;
margin: 50px auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
vertical-align:top;
text-align:left;
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
}

Problem is, any text I put within that div is also at 10% opacity. How do I make the text show up at 100%? I've tried a couple of different things and decided it was time to contact the ninjas.

Thoughts?
0
brucegust
Asked:
brucegust
4 Solutions
 
Kyle HamiltonData ScientistCommented:
Instead of setting the opacity on the div, give it a semitransparent background.

#page_wrap { 
width: 1200px; 
margin: 50px auto; 
padding: 20px; 
background: rgba(255, 255, 255, .1); 
-moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; 
vertical-align:top;
text-align:left;
}

Open in new window


filters are evil and should not be used. If you want to support IE < 9, use a semi transparent 1px png as a background image instead.
0
 
brucegustAuthor Commented:
Here's where I'm at:

#page_wrap {
width: 1200px;
margin: 50px auto;
padding: 20px;
background: rgba(255, 255, 255, .1);
-moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
vertical-align:top;
text-align:left;
}

...didn't work. I tried rgb instead of rgba and I was able to see the background color, but no opacity.

Tried the suggestion of using a semi-transparent .png, but by itself there was no transparency and when I tried to dictate it within CSS, I wound up with the same problem I had before in that the text was faded as well.

What am I missing?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Kyle HamiltonData ScientistCommented:
What browser are you using?
0
 
Kyle HamiltonData ScientistCommented:
make sure you are using png24. make the actual png image semi transparent, and then set it as your bg. This will work for IE7 and up, as well as real browsers.
0
 
Kyle HamiltonData ScientistCommented:
rgba works for IE9 and real browsers (not sure about IE8)
0
 
Julian HansenCommented:
Opacity on an object will affect everything inside that.

What I usually do is have the following.
Create a container with pos relative
Put an absolutly positioned div inside set to fill that container - this is where I set the opacity.
Put the content div over this one - the positioned div will be underneath so no need to position this one.

Works well for popups with semi-opaque backgrounds.
<html>
<head>
<style type="text/css">
#outerbox {
  position: relative;
  width: 1200px;
margin: 50px auto;
}
#underlay, #container {
padding: 20px;
z-index: 1000;
}
#underlay {
  position: absolute;
  top :0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity:0.1;
  filter:alpha(opacity=10); /* For IE8 and earlier */
  background: white;
  -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black;
  vertical-align:top;
  text-align:left;
  z-index: 1;
}
</style>
</head>
<body>
<div id="outerbox">
  <div id="underlay"></div>
  <div id="container"><p>Content here</p><p>Content here</p></div>
</div>
</body>
</html>

Open in new window

0
 
brucegustAuthor Commented:
I'm using IE8 and as far as the png specifics, I'm lost there. In Photoshop, I can save it as a PNG. I don't see any options as far as semi-transparent or png 24.
0
 
Kyle HamiltonData ScientistCommented:
in photoshop, you want to do "save for web and devices" (Photoshop 6 it's just "save for web").

You will get options in the top right of that dialog.

save for websave for web dialog50% white px png24
0
 
brucegustAuthor Commented:
OK, here's my HTML:

<div id="outerbox">
<div id="page_wrap"></div><div id="container">blah, blah, blah</div></div>

...and here's my CSS

#outerbox {
position:relative;
width: 1200px;
margin: 50px auto;
}

#page_wrap, #container {
padding: 20px;
z-index: 1000;
color:#000000;
}
#page_wrap {
  position: absolute;
  top :0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image:url(images/tray_background.png);
 opacity:0.3;
filter:alpha(opacity=30); /* For IE8 and earlier */
  vertical-align:top;
  text-align:left;
  z-index: 1;
}

Transparency of the background looks great but the text is still faded as well. What am I doing wrong?
0
 
Kyle HamiltonData ScientistCommented:
#page_wrap {
  position: absolute;
  top :0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image:url(images/tray_background.png);
/* remove this:
opacity:0.3;
filter:alpha(opacity=30);
 */

  vertical-align:top;
  text-align:left;
  z-index: 1;
}
0
 
brucegustAuthor Commented:
I got it to work by making these changes:

#container {
padding: 20px;
z-index: 1000;
color:#000000;
}
#page_wrap {
  position: absolute;
  top :0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image:url(images/tray_background.png);
opacity:0.4;
filter:alpha(opacity=40);
  vertical-align:top;
  text-align:left;
  z-index: -1;
}

I don't know if that represents an inappropriate "rigging" of the original suggestion, but it's working and I'm stoked!

Thanks so much!
0
 
Kyle HamiltonData ScientistCommented:
I'm not sure why you need the opacity and filter.

Here's an example where one box uses the bg image, and one box uses rgba:

http://candpgeneration.com/EE/transparentBG.html

view source for code
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now