The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> CSS Help
|
CSS color background transparent
Discuss CSS color background transparent in the CSS Help forum on Dev Shed.
CSS color background transparent Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.
|
|
 |
|
|
|
|
Dev Shed Forums Sponsor:
|
|
|
October 22nd, 2002, 06:14 AM
|
|
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
|
|
Moderator =(8^(|)
|
|
Join Date: Feb 2002
Location: Sacramento, CA
Posts: 1,710
Time spent in forums: 20 m 38 sec
Reputation Power: 13
|
|
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
|
|
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
|
|
Contributing User
|
|
Join Date: Apr 2002
Location: Inside the GNU/Hurd kernel
Posts: 492
Time spent in forums: 2 h 1 m
Reputation Power: 12
|
|
|
You can use a transparent PNG as background.
|
October 22nd, 2002, 03:40 PM
|
|
Moderator =(8^(|)
|
|
Join Date: Feb 2002
Location: Sacramento, CA
Posts: 1,710
Time spent in forums: 20 m 38 sec
Reputation Power: 13
|
|
|
Last edited by bricker42 : October 22nd, 2002 at 03:43 PM.
|
October 22nd, 2002, 07:14 PM
|
|
Senior Citizen
|
|
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019
Time spent in forums: < 1 sec
Reputation Power: 15
|
|
|
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
|
|
Moderator =(8^(|)
|
|
Join Date: Feb 2002
Location: Sacramento, CA
Posts: 1,710
Time spent in forums: 20 m 38 sec
Reputation Power: 13
|
|
adios: that is awsome!
Doesn't work in mozilla, though...  (v. 1.2a ).
|
October 22nd, 2002, 11:44 PM
|
|
Senior Citizen
|
|
Join Date: Jan 2001
Location: leftcoast
Posts: 2,019
Time spent in forums: < 1 sec
Reputation Power: 15
|
|
(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
|
|
Moderator =(8^(|)
|
|
Join Date: Feb 2002
Location: Sacramento, CA
Posts: 1,710
Time spent in forums: 20 m 38 sec
Reputation Power: 13
|
|
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%.
|
October 23rd, 2002, 11:44 AM
|
|
Moderator =(8^(|)
|
|
Join Date: Feb 2002
Location: Sacramento, CA
Posts: 1,710
Time spent in forums: 20 m 38 sec
Reputation Power: 13
|
|
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 = " ";
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.
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
 Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
