Transparency

Barrucadu · Oct 23, 2006

How would I make a table have a semi-transparent background, but one of the cells have a fully opaque background?

I know you can do it in ie:

Code:

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
	<tr>
	     <td style="position: relative;">Woo! Opaque!</td>
	</tr>
         <tr>
	     <td>Woo! 50% Opaque!</td>
	</tr>
</table>

How would I change that code to work in other browsers?

andysyme · Oct 23, 2006

Warning: Very cheap and nasty, but all I could come up with at the moment

Code:

<table height="200" width="200" border="1" style="filter: alpha (opacity=50);">
	<tr>
	     <td bgcolor="#FF0000" style="position: relative;">Woo! Opaque!</td>
	</tr>
         <tr>
	     <td bgcolor="#FF0000" style="-moz-opacity:.40;">Woo! 50% Opaque!</td>
	</tr>
</table>

I have left your IE handling as is. I use the -moz-opacity for firefox. However, I had to style each cell individually. Have a play and you'll get the idea!

There must be a neater way, just haven't found it yet!

Andy

Barrucadu · Oct 23, 2006

FOUND THE CODE

Code:

<style>
/*Transparency*/
#one {
	position: relative;
}
#two {
	z-index: 5;
	position: relative;
}
#thr {
	background-color: #FFFFFF;
	border: 1px solid black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

<div id="one">
<div id="thr"></div>
<div id="two">
Content Goes Here
</div></div>

Demo: http://www.white-knights-templar.com/phpBB2/index.php

The CSS method dosnt work in IE, so i'm going to have to mess around with it until it does...

BeZazz · Oct 23, 2006

i did a code "years" ago which may help it is here
http://pbsupport2.proboards29.com/index.cgi?board=codes&action=display&thread=1094952802

it appears that board is closed to non members(i havnt been there for ages)

EDIT: oh well i tried to paste the code here but the forum wouldnt allow me

1. You have included too many images in your signature or in your previous post. Please go back and correct the problem and then continue again.

Images include use of smilies, the vB code

Barrucadu · Oct 23, 2006

Woo! I got it working!

Here is the IE, Firefox and Opera version:

Code:

<style>
/*Transparency*/
#one {
	position: relative;
}
#two {
	z-index: 5;
	position: relative;
}
#thr {
	background-color: #FFFFFF;
	border: 1px solid black;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

<comment><div id="one">
<div id="thr"></div>
<div id="two"></comment>
<!--[if IE]><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center" style="filter: alpha (opacity=50);background-color:#FFFFFF;"><![endif]-->
<comment><table width="100%" cellspacing="0" cellpadding="10" border="0" align="center" style="background-color:#FFFFFF;"></comment>
<tr>
<td><!--[if IE]><div style="position:relative;"><![endif]-->
Content Goes Here
</td></tr></table>
<comment></div></div></comment>

hosteltech.es

aroen.info

ivreplus.es

abclawacademy.com

serifusagashi.com

x67.casino

sexogolic.info

shoturl.at

winpages1022.com

agroamigable.co

Transparency

Established Member

Established Member

Established Member

VIP Member

Established Member

Fiddler.ml

EilenBerger.com

JAWE.ORG

vaxpas.com

bitcoinomniverse.com

GulfCoin.org

RoomtoRoom.com

Mycotec.com

greyfinancial.com

CannabisIndustry.org

Similar threads

We're social

Fiddler.ml

EilenBerger.com

JAWE.ORG

vaxpas.com

bitcoinomniverse.com

GulfCoin.org

RoomtoRoom.com

Mycotec.com

greyfinancial.com

CannabisIndustry.org

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling