SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard Darren884's Avatar
    Join Date
    Aug 2003
    Location
    Southern California, United States
    Posts
    1,616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a table clearish but not fully transparent?

    How would I make it so a table shows a hint of the background but is not fully transparent?
    Have a good day.

  2. #2
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Create a gif that is partially transparent and partially the bg colour. Then use it as a background image to the table via css.

    hope it helps
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    table {
      opacity: 0.5
    }
    This only works in Gecko browsers and Safari currently, but if you're going for an all-CSS method it's your best shot. You can add support for IE by using its proprietary CSS filters, like so:
    Code:
    table {
     opacity: 0.5;
     filter: alpha(Opacity=80);
    }

  4. #4
    SitePoint Wizard Darren884's Avatar
    Join Date
    Aug 2003
    Location
    Southern California, United States
    Posts
    1,616
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi guys how would I only apply it to the tables background?
    Have a good day.

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Why not just take the background image into photoshop and adjust the opacity on it?

  6. #6
    . gdape's Avatar
    Join Date
    Jan 2002
    Location
    in the outskirts, and in the fringes
    Posts
    501
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am assuming there is an image underneath it all that you want to partially show through the table.

    Using a gif, one way is to create a 2x2 pixel image with the top right and bottom left pixels transparent, the other two opaque (white for example). It's not pretty but it works.

    Otherwise the only image that supports true alpha transparency is PNG24, which is not supported by IE (The image will load but the transparency won't show).

    You could use both with the IE hack:

    Code:
    .transparent { background:url(image.gif); }
     /* mozilla will see this */
     html>body table.transparent { background:url(image.png); }
     
     (There are more comprehensive hacks for every browser)

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    heres an example I did for someone else a while ago but shows two different techniques similar to mentioned above.

    http://www.pmob.co.uk/temp/opacityview.htm

    One uses pngs for mozilla and ies alpha image loader
    Code:
     filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/50percent.png', sizingMethod='scale');
    View source to see the code as it is a little complicated but doesn't have the drawback of making the text opaque as per the usual ie filter.

    See here for some other threads about transparency:

    http://www.sitepoint.com/forums/showthread.php?t=149579
    http://www.sitepoint.com/forums/showthread.php?t=187929

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •