opacity question

E

Eric

New Member
I really like the look of text with a see-through background over an image. I tried using the w3schools method of doing this. The description implies that it's text over a transparent background, but in truth the opacity is applied to the text as well, which is what I don't want. (I found this out when I tried to apply it to alternate rows on table rows- ug-lee!!) Is there a way to apply opacity to the background color behind the text and not the text itself? I tried to wrap an extra class around it, but so far it's not working. Here's what I'm starting with:

Code: 
<html>
<head>
<style>
p{
font: 14px Helvetica
color:#FC6;
background-color:#033;
filter:alpha(opacity=60);
 opacity:0.6;
}
</style>
</head>
<body>
<p> Why is my text so dark? </p>
</body>
</html>
 
E

Eric

New Member
By the way, I also tried
Code: 
p{
filter:alpha(opacity=100);
opacity:1;
}

and according to firebug, the rule was applied, but it still looks the same for some reason.
 
E

Eric

New Member
I'm sorry, my last post was confusing. This is what I tried:
Code: 
<html>
<head>
<style>
.opacity{
background-color:#033;
filter:alpha(opacity=60);
  opacity:0.6;
}
p{
font: 14px Helvetica
color:#FC6;
filter:alpha(opacity=100);
 opacity:1;
}

}
</style>
</head>
<body>
<div class="opacity"><p> Why is my text so dark? </p></div>
</body>
</html>
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Just so I understand you correctly...you want a semi-transparent box with text inside it that sits over the top of an image right?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Eric, you had the basic idea right you just need to double check your css code. You have syntax errors:

  • Missing a semicolon after the font attribute in the P style
  • You have an extra curly bracket "}" after the P style
  • FYI, styles can conflict when you use globals (like P, div, a, etc.) so sometimes its best to declare styles more definitively.

CSS
Code: 
div.opacity {
background-color:#033;
filter:alpha(opacity=60);
opacity:0.6;
}
div.opacity p {
font: 14px Helvetica;
color:#FFF;
}
 
E

Eric

New Member
Thanks for replying. The syntax errors are the result of sloppy cutting and pasting, but I should get in the habit of being more specific about selectors. I am able to affect the opacity through a separate rule, but even at 1 or 0.99 opacity, there is still some background "staining" the text, and the text just looks dull. I tried increasing the paragraph opacity in the w3schools example and same problem (if you look at the example they've given, the text looks even more dull). I already have other text on the page that's not over a background, and it's much sharper looking.
Unless there is a javascript solution to this, I'm just going to give up on this effect. I can always use an image, but I was hoping to use css so it would expand with the text. Absolute positioning might work, but again, the background won't expand, and I'll have to nudge the text all over the place.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
I see what you mean about the staining. I did not notice it before when I had the body bg set to white.

I attached an example I made a while back, maybe this will help. It uses absolute positioning and an empty div which is not semantically correct. I will try to find a why of eliminating that, but until then....

View attachment Transparency.zip
 
E

Eric

New Member
Cool, thanks for that. The text looks much sharper that way. I changed the box color to black and it looked cleared still. I can forego semantics to get the right look, the problem of course is the user resizing the text. (BTW, is there a css rule that prevents resizing?) It looks bad to make the box bigger than necessary just to allow room for this.

For the moment, I've brightened my text color a bit and increased opacity to 0.8. It's not quite what I want, but any lower than that starts to look bad.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Ahh but wait Eric, I gotta better solution haha. Don't use opacity or filter. Try this instead:

Code: 
div.transbox {
background: rgba(255, 255, 255, 0.3);
width:150px;
height:300px;
margin:0;
padding:10px;
}
div.transbox p {
font:normal 10pt Arial;
color:#fff;
padding:0;
margin:0;
}

This eliminates the empty div tag I mentioned before.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
OK so that works great in all browsers but IE...go figure. The other option is a transparent png image (1x1).
 
E

Eric

New Member
Dang, so close! Hell has a room reserved for IE. Actually, now that I think about it, I don't know why I'm not using a png background image. It offers total control and no extra mark-up. Huh. I guess I always try things the hard way.

I must say my site is getting a little bit trans-png heavy right now. I don't have experience with making sites this way and don't know what I'm in for when I fix for IE. I know there are filters to make trans-pngs work, but am I looking for trouble by using them for a repeating background, performance-wise?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Eric said:
... am I looking for trouble by using them for a repeating background, performance-wise?
Click to expand...

I don't think you will have "performance" issue using a transparent png image for the background, as the size of image will be so small (1x1). The issue with these will be in IE6. It does not like 'em.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
charplus01 said:
If you have a div with opacity, create a another div inside of that and set that opacity to 100, that way your text isnt transparent also.





Tony is the lead developer at CharlottePlus web design in Charlotte, NC. Rate me on the web designer directory.
Click to expand...

Incorrect, any child element will inherit the parent level opacity setting. The CSS3 solution i added fixes that in all browsers except IE.
 
E

Eric

New Member
This sounds like the same problem I originally posted. What should work-stating full opacity for the text and less for the background-doesn't. What I'm doing is using a transparent png for a repeating background. It's working fine, except in ie6, of course.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
smilly123 said:
Hello
What I want to be able to do is to have 3 images (top, fill, bottom). With these 3 images i was going to place the first, then use the second to fill a text area depending on the amount of text, then the third to close it up. This is fine and I have had no problems with it. Where I run into problems is when I try to create an opacity filter over it, it fades the text as well as the background images. Is there any way to make it where you are able to fill the text area with the fill image and have only the background have the opacity.
Click to expand...

FYI, I know your question is related, but please don't hijack someone's thread. Create a new thread for your issue.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Eric said:
This sounds like the same problem I originally posted. What should work-stating full opacity for the text and less for the background-doesn't. What I'm doing is using a transparent png for a repeating background. It's working fine, except in ie6, of course.
Click to expand...

Eric, here is a solution to the transparent png issue in IE6: Twin Helix Method
 
E

Eric

New Member
cool, thanks for that link, PP. I'm a bit concerned about that the help guide says "Also, make sure that you are not trying to tile a 1x1px PNG background over a large element, as this will bring the browser to its kness -- make your images a little larger if you run into this :)." I'm assuming he just means this happens in IE6, not all browsers. If that's the case, IE6 users are used to waiting for stuff anyway, so whatever.
 
You must log in or register to reply here.
Top