View Full Version : Table Cell Opacity / Transparent ??????????
lost2 08-28-2003, 02:21 AM hey hi :)
i would like to know how i can make a table cell kind of transparent... where you can see the background color and see that behind it there's a background image
example:
<table background="someiage.gif" cellspacing="10">
<tr>
<td bgcolor="#808080" class="opaque">
any ideas?? tanx in advance
WStevens 08-28-2003, 03:38 AM I have never known that you can make a cell transparent.. Cool! I will definitely have to subscribe to this thread to see if anyone can share their knowledge..
-Will
MrSizzle 08-28-2003, 03:52 AM I am not sure if this is possible either. I have been searching on www.htmlgoodies.com but haven't found a reference to that yet.
You might want to try sending an email asking that very question. It is one of the places you should be able to get the answer from.
:smokin:
El Nino 08-28-2003, 09:03 AM I've been wondering the same thing for a while now. I've seen it done on a website before but I forgot to save the source code. I'm pretty sure CSS is involved.
Deathdart 08-28-2003, 09:24 AM I don't know if it's possible using CSS, but you can definitely do it using a 4px GIF.
Make a new 4 pixel file. Colour the top left and bottom right pixels with the colour you want the cell to be. Leave the other two pixels white (or some other colour). Save the file as a .gif and set the transparent colour to white (or the other colour). Use this image as your cell bg and you should have a cell with a transparent background. :)
If anyone can tell me how it's done with CSS, I'd be glad to know...
VanHost 08-30-2003, 01:28 AM I think Deathdart has it figured out. I have never seen it done with code, it is more of a graphical thing.
I might just keep my eye on this thread (like the rest of you) to see if there is an "all-mighty" that could share his/her infinite wisdom.
Thanks.
El Nino 08-31-2003, 11:57 AM I found this example website, is this what you're trying to do?
http://www.option5.net/testing/
lost2 08-31-2003, 01:28 PM i did it here:
http://rapreport.com/klr/bio.htm
check out the code there... if anyone figures out how that code works please tell me becuz i subtracted alot from it.. i forgot where i got it from
i will try the image 4 pixel thing, sounds like it will work, good thinkin ;)
tanx
check the site i'm doing this to @ www.305hiphop.com
lost2 08-31-2003, 01:57 PM i tried several ways to do the pixel thing but i dont' like how it looks.. i'm going to try to mess with that code, if yall didn't see it this is the source
<head>
<style>
.a{z-index:10;position:absolute; height:40;width:150;top:50;left:12;border:000000 solid 1px;padding:5;background:fee;font:11;color:000;}
</style>
</head>
<body background="http://www.rapreport.com/klr/images/122502_03.gif" bgproperties="fixed">
<div class=a id=1 style="width: 400; height: 105">wordsgohere</div>
<div class=b id=2 onmouseover="st1(20,2)" onmouseout="st2(80,2)"></div>
<div class=c id=3 onmouseover="st1(20,3)" onmouseout="st2(80,3)"></div>
<div class=d id=4 onmouseover="st1(20,4)" onmouseout="st2(80,4)"></div>
<div class=e id=5 onmouseover="st1(20,5)" onmouseout="st2(80,5)"></div>
<div class=g id=7 style="cursor:w-resize" ></div>
<script>
aus();
function st1(a,id){
i=a;i+=19;
document.getElementById(id).style.letterSpacing=i/9;
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (i<90){setTimeout('st1('+i+','+id+')',1)}return(i)}
function st2(a,id){
i=a;i-=5;
document.getElementById(id).style.letterSpacing=i/13
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (i>50){setTimeout('st2('+i+','+id+')',1)}}
function aus(){
for (z=1;z<=5;z++){
document.getElementById(z).style.filter='alpha(opacity=60)';
document.getElementById(z).style.letterSpacing=2;
document.getElementById(7).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=130,color=black,strength=5)'}
}
;
</script>
</body>
VanHost 08-31-2003, 02:30 PM In the 2 working examples above, they are both using layers using the DIV tag. I can't remember all the browsers, but it is not supported by quite a few of them.
You may want to check compatibility!
Thanks.
lost2 08-31-2003, 02:52 PM ok.. but i been playing with the coding and you don't need to use the DIV this is using styles
now i'm lookin into DXImageTransform opacity
lost2 08-31-2003, 03:49 PM CHECK IT !!! I DON DONE IT !! YAY !!
i found out how to do it and its using CSS style or whatever
<style>
.a{border:000000 solid 1px;background: white;filter: alpha(opacity=90); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 90%;}
</style>
<table class=a
or
<td class=a
bedlam 08-31-2003, 04:26 PM Hey,
I don't know if it's relevant to your site/page, but I believe this is an IE only possibility..
B
lost2 08-31-2003, 04:56 PM its ko.. cuz what may happen if it don't work ? the default correct ? also i've checked my statistics and 96.89 % (103266) people on my site use IE
but i appreciate you tellin me this, good lookin
;)
El Nino 08-31-2003, 07:09 PM If you do it using the CSS styles, the text in the <table> or <td> is also affected by the opacity. The result would be similar to the link I posted above. Everything in the table on the left is affected by the 80% opacity while the table on the right only the background is 80% while the text (and images) themselves are unaffected.
lost2 08-31-2003, 07:38 PM hu.. i'm not sure about all that but i do know i got what i wanted.. now i'm trying to find the coding for the shadow.. i did it by mistake.. then i lost it.. now i'm lookin again.. i'm searching in microsoft site .. have any of yall worked with MSDN ?
El Nino 08-31-2003, 08:37 PM I guess it all depends on how your are designing your site. If you set the ocpacity to 10%, the table AND the text be 10% visable. But, if you use the code for the table on the right side on this page (http://www.option5.net/testing/), only the table background will be 10% and the text will be unchanged (100%).
I highly doubt the shadowing will be on microsoft.com or MSDN, search on google.com for CSS shadow or something like that.
katone 12-13-2005, 09:41 AM the links are now dead.
I made a table/cell transparent, but what is the code to keep the text visible (NOT transparent) as "Nino" explains above?
Would it be possible to post this code again? (transparent background on table, and text NOT transparent)
thanks!
florinsasioan 12-13-2005, 04:47 PM El nino is right if you use "alpha(opacity= );" everything in the table will be afected by the opacity, but css might save you
You will use div container to define a color which is transparent and use another div container "position:absolute" to handle the text
|