CSS color background transparent

Dev Shed Forums Sponsor:

October 22nd, 2002, 06:14 AM

atticweb

Junior Member

Join Date: Oct 2002

Posts: 2

Time spent in forums: < 1 sec
Reputation 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

October 22nd, 2002, 11:54 AM

bricker42

Moderator =(8^(|)

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Feb 2002

Location: Sacramento, CA

Posts: 1,710

Time spent in forums: 20 m 38 sec
Reputation Power: 8

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

October 22nd, 2002, 02:37 PM

atticweb

Junior Member

Join Date: Oct 2002

Posts: 2

Time spent in forums: < 1 sec
Reputation Power: 0

thanks for the response anyway

jim

October 22nd, 2002, 02:55 PM

Tuxie

Contributing User

Join Date: Apr 2002

Location: Inside the GNU/Hurd kernel

Posts: 492

Time spent in forums: 2 h 1 m
Reputation Power: 7

You can use a transparent PNG as background.

October 22nd, 2002, 03:40 PM

bricker42

Moderator =(8^(|)

Join Date: Feb 2002

Location: Sacramento, CA

Posts: 1,710

Time spent in forums: 20 m 38 sec
Reputation Power: 8

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.

October 22nd, 2002, 07:14 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

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://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.

October 22nd, 2002, 11:35 PM

bricker42

Moderator =(8^(|)

Join Date: Feb 2002

Location: Sacramento, CA

Posts: 1,710

Time spent in forums: 20 m 38 sec
Reputation Power: 8

adios: that is awsome!

Doesn't work in mozilla, though...

(v. 1.2a ).

October 22nd, 2002, 11:44 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 10

(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://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¢ 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.

October 23rd, 2002, 12:15 AM

bricker42

Moderator =(8^(|)

Join Date: Feb 2002

Location: Sacramento, CA

Posts: 1,710

Time spent in forums: 20 m 38 sec
Reputation Power: 8

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%.

#10

October 23rd, 2002, 11:44 AM

bricker42

Moderator =(8^(|)

Join Date: Feb 2002

Location: Sacramento, CA

Posts: 1,710

Time spent in forums: 20 m 38 sec
Reputation Power: 8

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 = "&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.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: