#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Posts
    2
    Rep Power
    0

    CSS color background transparent


    I have a menu in a table. There's a background image on the page and I want to colour the table cells but still see the background thru the cell. i know there is color background transparent in CSS but can you make the transparent a %??
    Jim
  2. #2
  3. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    Not without making everything in the table (the text and stuff) transparent as well. You could try floating a div behind the table and putting the transparent image in there, but it probably isn't worth it .
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2002
    Posts
    2
    Rep Power
    0
    thanks for the response anyway

    jim
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    12
    You can use a transparent PNG as background.
  8. #5
  9. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    If you go that route, you'll need to fake IE. Here's some code that helps with that:
    http://www.youngpup.net/?request=/snippets/sleight.xml

    Note that this only works for ie5.5+. I don't think ie5.0 supports alpha channels.
    Last edited by bricker42; October 22nd, 2002 at 03:43 PM.
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Try this:


    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    table {
    background: pink;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 50%;
    }

    td {
    position: relative;
    width: 80px;
    font: 200 10px verdana;
    text-align: center;
    border: 2px salmon solid;
    }

    .menu {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 82px;
    font: 200 10px verdana;
    color: #440000;
    text-align: center;
    border: 1px black solid;
    cursor: hand;
    }

    body {
    text-align: center;
    margin-top: 94px;
    background: url(http&#58;//216.40.241.209/textures/misc/misc059.gif);
    }

    </style>
    <script type="text/javascript" language="javascript">

    // mouseover - no additional cost...
    var tds = document.getElementsByTagName('td');
    onload = function() {
    var c, i =0;
    while (c = tds.item(i++)) {
    c.onmouseover = function() {this.style.background='salmon';}
    c.onmouseout = function() {this.style.background='transparent';}
    }
    }

    </script>
    </head>
    <body>
    <div style="width:360px;border:3px black double;">
    <table>
    <tr>
    <td><span class="menu">choice 1</span>choice 1</td>
    <td><span class="menu">choice 2</span>choice 2</td>
    <td><span class="menu">choice 3</span>choice 3</td>
    <td><span class="menu">choice 4</span>choice 4</td>
    </tr><tr>
    <td><span class="menu">choice 5</span>choice 5</td>
    <td><span class="menu">choice 6</span>choice 6</td>
    <td><span class="menu">choice 7</span>choice 7</td>
    <td><span class="menu">choice 8</span>choice 8</td>
    </tr><tr>
    <td><span class="menu">choice 9</span>choice 9</td>
    <td><span class="menu">choice 10</span>choice 10</td>
    <td><span class="menu">choice 11</span>choice 11</td>
    <td><span class="menu">choice 12</span>choice 12</td>
    </tr>
    </table>
    </div>
    </body>
    </html>


    There may be another way to override inheritance of an alpha filter than using positioned elements, but I haven't seen it (yet).

    Alpha filters have been supported since IE4.
    Last edited by adios; October 23rd, 2002 at 12:37 AM.
  12. #7
  13. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    adios: that is awsome!

    Doesn't work in mozilla, though... (v. 1.2a ).
  14. #8
  15. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    (I liked the first part of your post better)

    Been fooling with this:


    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">

    table {
    background: #9999cc;
    filter: alpha(opacity=44);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=44);
    -moz-opacity: 44%;
    }

    td {
    position: relative;
    width: 78px;
    font: 200 12px "comic sans ms";
    color: #000000;
    text-align: center;
    border: 1px #000066 solid;
    }

    .menu {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 80px;
    font: 200 12px "comic sans ms";
    color: #ffffff;
    text-align: center;
    cursor: hand;
    }

    body {
    margin-top: 60px;
    margin-left: 0px;
    overflow: hidden;
    background: url(http&#58;//216.40.241.209/textures/lblue/lblue064.jpg);
    }

    </style>
    <script type="text/javascript" language="javascript">

    var tds = document.getElementsByTagName('td');
    onload = function() {
    var c, i =0;
    while (c = tds.item(i++)) {
    c.onmouseover = function() {this.style.background='#000066';}
    c.onmouseout = function() {this.style.background='transparent';}
    }
    }

    </script>
    </head>
    <body>
    <div style="width:88px;border-top:4px #6666aa groove;border-bottom:4px #6666cc groove;border-right:4px #6666cc groove;">
    <table>
    <tr>
    <td><span class="menu">choice 1</span>choice 1</td>
    </tr><tr>
    <td><span class="menu">choice 2</span>choice 2</td>
    </tr><tr>
    <td><span class="menu">choice 3</span>choice 3</td>
    </tr><tr>
    <td><span class="menu">choice 4</span>choice 4</td>
    </tr><tr>
    <td><span class="menu">choice 5</span>choice 5</td>
    </tr><tr>
    <td><span class="menu">choice 6</span>choice 6</td>
    </tr><tr>
    <td><span class="menu">choice 7</span>choice 7</td>
    </tr><tr>
    <td><span class="menu">choice 8</span>choice 8</td>
    </tr><tr>
    <td><span class="menu">choice 9</span>choice 9</td>
    </tr>
    </table>
    </div>
    </body>
    </html>


    How 'bout that 19&#162; drop-shadow?

    Don't have moz here at the moment - is it the opacity that's not happening? Oh, well...

    ...seen this?
    Last edited by adios; October 23rd, 2002 at 12:38 AM.
  16. #9
  17. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    That's pretty sweet. I tried for awhile to get that effect with a dropdown menu, but it kept going all googly.

    As for your code in mozilla, mozilla is smarter than ie . It doesn't forget the opacity, and it doesn't lose the rollover background (odd that). So everything within the cells is transparent, and once the background color changes it stays stuck.

    ** edit **
    What would be really nice would be if you could set the opacity to 120%.
  18. #10
  19. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    Check it out. Tested in moz 1.1b and ie5.0.

    Code:
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    table {
    background: pink;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 50%;
    }
    
    td {
    position: relative;
    width: 80px;
    font: 200 10px verdana;
    text-align: center;
    border: 2px salmon solid;
    }
    
    .menu {
    position: absolute;
    font: 200 10px verdana;
    color: #440000;
    text-align: center;
    text-decoration: none;
    background:transparent;
    }
    .menu:hover {
    	background:salmon;
    	color: #884444;
    }
    
    body {
    text-align: center;
    margin-top: 94px;
    background: url(http://216.40.241.209/textures/misc/misc059.gif);
    }
    
    </style>
    <script type="text/javascript" language="javascript">
    
    // mouseover - no additional cost...
    var tds = document.getElementsByTagName('td');
    onload = function() {
    	var c, i =0;
    	while (c = tds.item(i++)) {
    		d = document.getElementById( 'container' );
    		e = document.createElement( "a" );
    		e.setAttribute( "href", "link" + i + ".html" );
    		e.className = "menu";
    		e.style.left = c.offsetLeft;
    		e.style.top = c.offsetTop;
    		e.style.width = c.offsetWidth;
    		e.style.height = c.offsetHeight;
    		e.style.display = "block";
    		e.style.position = "absolute";
    		e.innerHTML = c.innerHTML;
    		c.innerHTML = "&amp;nbsp;";
    		d.appendChild( e );
    	}
    }
    
    </script>
    </head>
    <body>
    <div style="width:360px;border:3px black double;">
    <table>
    <tr>
    <td>choice 1</td>
    <td>choice 2</td>
    <td>choice 3</td>
    <td>choice 4</td>
    </tr><tr>
    <td>choice 5</td>
    <td>choice 6</td>
    <td>choice 7</td>
    <td>choice 8</td>
    </tr><tr>
    <td>choice 9</td>
    <td>choice 10</td>
    <td>choice 11</td>
    <td>choice 12</td>
    </tr>
    </table>
    </div>
    <div id="container"></div>
    </body>
    </html>
    Next step is to see if I can steal a link node from inside the td and just change its parent.
    Last edited by bricker42; January 1st, 2003 at 02:12 PM.

IMN logo majestic logo threadwatch logo seochat tools logo