SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    70 percent of transparency

    Code:
    <table>
    
      <tr>
    
        <td style='background-color:#000000;
                  background-color:transparent'>
    
           myText
    
        </td>
    
      </tr>
    
    </table>
    The code above diplays 100% transparency.

    How can I make it 70% transparency?

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

    You can use the opacity filter for IE and opacity for gecko.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    table{background:red}
    .test {
            background:#000;
            color:#fff;
      /*opacity for IE5+*/
      filter: alpha(opacity=70);
      /*opacity for older Mozilla browsers*/
      -moz-opacity: 0.7;
      /*opacity for mozilla/safari*/
      opacity: 0.7;
    }
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td class="test"> myText </td>
        </tr>
    </table>
    </body>
    </html>
    The problem with opacity is that it makes everything opaque including the text.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you, Paul. it works fine.



    Quote Originally Posted by Paul O'B View Post
    The problem with opacity is that it makes everything opaque including the text.
    Yes, It is a problem.

    I like to make the text clear...

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    The only other option is to use a transparent background png instead but IE doesn't understand that either and you would need to use the alpha image loader filter (which can't repeat images but only scale,image and crop).

    http://www.pmob.co.uk/temp/opacity5.htm
    http://www.pmob.co.uk/temp/transparent-test3.htm


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
  •