#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    44
    Rep Power
    12

    css alpha troubles


    is there any way to have the background of a table be at 50% opacity and the text be at 100% opacity?

    i've been playing with this code:

    style="filter:Alpha(Opacity=xx)" ...where xx is 50 or 100

    and have placed it within the <table> tag and also within a <font> tag, but nothing seems to work. the font wants to be the same opacity as the table.

    is there any way around this?

    on a possible workaround, i've tried using semi-transparent PNG file as the background of the table, and that didn't work. i couldn't get the PNG file to do semi-transparent. it wanted to do a diffusion transparency, which looked like @ss.
  2. #2
  3. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    IE/Win doesn't support the alpha chanel in PNG's (just binary transparency). Every other modern browser does.
    Jason Contact Me
    Super moderator @ CodingForums
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    44
    Rep Power
    12
    ok, that answers one questions, but what about having the two different opacities for table background and text?
  6. #4
  7. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    <div style="-moz-opacity: 0.5;">
    <span style="-moz-opacity: 1;">opaque text on a translucent background in Gecko</span>
    </div>
    Jason Contact Me
    Super moderator @ CodingForums
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    44
    Rep Power
    12
    what about ie?
  10. #6
  11. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    Same idea, but with filter crap instead of -moz-opacity. Or you can use both properties, and make it crossbrowser.
    Jason Contact Me
    Super moderator @ CodingForums
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    44
    Rep Power
    12
    this is a testing page i'm trying to use this on:

    http://www.option5.net/testing

    the box on the right is what i want it to look like, however, this is achieved using two absolute-positioned div layers, one using an opacity of 100 for the text and the other underneath it for the background at an opacity of 70. the box on the left uses relative positioning, which is more what i need it for, as this page will be updated often, and it would be better to be able to put in a relative position, and all other div layers following it would move down the page accordingly.

    i haven't tested this in netscape or any other browser, just ie.
  14. #8
  15. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    Ottawa
    Posts
    23
    Rep Power
    0
    In Opera 7.0 and in Netscape

    Your left box works doesn't have the transparency effect
    The right hand box doesn't have its grey background or transparency effect on the images.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Posts
    44
    Rep Power
    12
    this i know for i haven't checked in netscape nor opera nor anything but ie. i want it to work in ie first and then i'll get it to work in other browsers.
  18. #10
  19. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Location
    england
    Posts
    3
    Rep Power
    0

    Lightbulb css


    I've been having the same problems but i want the table to be semi-transparent and the content to be normal.


    Try doing something like this - - -

    ...
    <td style="filter: alpha(style=0, opacity=50)">testin'</td>
    ...


    hope this works!
  20. #11
  21. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    1
    Rep Power
    0

    Um...


    Internet Explorer DOES support png alpha if you are ready to go the long way around.... Read more about it here: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
  22. #12
  23. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15

    Re: Um...


    Originally posted by rhedman
    Internet Explorer DOES support png alpha if you are ready to go the long way around.... Read more about it here: http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
    No. That's not supporting the alpha png channel. That's using native DirectX calls in a webpage through an ugly hack which is usually useless, as using translucent PNGs in <img/> is rarely what you want to do with them.
    Jason Contact Me
    Super moderator @ CodingForums
  24. #13
  25. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Location
    sweden
    Posts
    1
    Rep Power
    0

    Question alpha in Safari + Explorer (MAC)


    well..
    i tried the alpha with css on my site www.ffiffl.com

    and it worx fine in windows explorer.. but in Safari and Explorer on Macintosh i cannot see the neat alpha trick..
    i wonder why?

    any other CSS-designers with Mac.. is there a workaround?



    mac OS X Tiger
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2004
    Posts
    1
    Rep Power
    0

    Alpha in Safari


    for safari use the RGBA (CSS2) specification:

    Example:
    background-color: rgba(153,255,153,0.7);

IMN logo majestic logo threadwatch logo seochat tools logo