opacity question

Discussion in 'Web Design' started by Eric, Nov 30, 2009.

to remove all ads.
  1. Eric

    Eric New Member

    Messages:
    56
    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>
     
  2. Eric

    Eric New Member

    Messages:
    56
    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.
     
  3. Eric

    Eric New Member

    Messages:
    56
    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>
     
  4. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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?
     
  5. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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;
    }
    
     
  6. Eric

    Eric New Member

    Messages:
    56
    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.
     
  7. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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
     
  8. Eric

    Eric New Member

    Messages:
    56
    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.
     
  9. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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.
     
  10. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    OK so that works great in all browsers but IE...go figure. The other option is a transparent png image (1x1).
     
  11. Eric

    Eric New Member

    Messages:
    56
    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?
     
  12. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    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.
     
  13. PixelPusher

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Incorrect, any child element will inherit the parent level opacity setting. The CSS3 solution i added fixes that in all browsers except IE.
     
  14. Eric

    Eric New Member

    Messages:
    56
    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.
     
  15. PixelPusher

    PixelPusher Super Moderator Staff Member

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

    PixelPusher Super Moderator Staff Member

    Messages:
    1,077
    Eric, here is a solution to the transparent png issue in IE6: Twin Helix Method
     
  17. Eric

    Eric New Member

    Messages:
    56
    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.
     

Share This Page