[Sirizz]

Hi everyone,

Got a problem here. I got some tables with a backgroundcolor. Now I want those tables to be transparent, so I can see the background image through. But I have to see the text too, so the text can't be transparent.

Does someone know how I can do this? Cause I've been looking for ages to find it.

I would really appreciate some help. Thx in advance!

Grtz

[Nova Dragoon]

could you post the code you are having trouble with, or a link to the site?

IIRC, if you remove the background color attribute they become transparent over the background.

[Amadeus]

Try this

<TABLE ID="tableID" STYLE="background-color: transparent;">

It should work, with these noted limitations.

[Sirizz]

Site

This is the link to the page where I use the tables with opaque background. As u can see, I managed to get a opaque textbox (upper box), and table. The text in it is white, but it is transparent too. Now I only have to get the text normal.

[Jhin]

Once I removed this:

.opaque {
opacity: 1;
filter: alpha(opacity=10);
}

And added this:

textarea{
	color: white;
	background-color: transparent;
}

td{
	color: white;
	background-color: transparent;

}

The text area became transparent with the font color white in both IE6 and FF 1.0.6, WinXP.

[Sirizz]

This is not really what I'm looking for. It has to be like it is now on the page, so I can see through the box, but not fully. I only have to get the text brighter.

Has someone a solution for that??

[skyhawk133]

One of our code snippets has the CSS for a transparent box with non-transparent text, here is the CSS:

div.box {
     /*Any properties you'd want the box to have.*/
     /*Would probably be position, dimension type stuff.*/
     border: 1px solid #000000;
     width: 500px;
     height: 500px;
     position: relative;
}
div.box_contents {
     background-color:transparent;
     height: 100%;
     position: relative;
     width: 100%;
     z-index: 101;
}
div.box_background {
     background-color: blue;
     height: 100%;
     opacity: 0.5;
     filter:alpha(opacity=50); /* IE's opacity*/
     position: absolute;
     left: 0px;
     top: 0px;
     width: 100%;
     z-index: 100;
}

Here is the full snippet: http://code.dreaminc.../snippet188.htm

[Jhin]

ahh ok my appologies, I didn't quite understand what you were looking for

[Sirizz]

Thx Shyhawk, you helped me out! I managed to get my text in a transparent box!

Thx all for ur help!

Grtz

[skyhawk133]

No problem, the credit has to go to hotsnoj for actually writing that code though!!

Glad we were able to help Sirizz, tell your friends Hope we can be of assistance in the future as well.

[snoj]

Cool, I'm glad someone else else besides me has found it helpful!

[rhand]

Well I am trying to add the same on a site of mine. With not success so far. I made a content area and images are floating behind it using javascript. Could someone maybe have a look and tell me what I did wrong. I have been at it for some time now. Fonts are still transparent. I only want the background to be transparent. Maybe I am too tired.... ;-) Here is the css code that is the problem (iI did not paste the entire stylesheet):

body
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#fff;
background-image:url(images/topbck.gif);
background-repeat:repeat-x;
color:#666;
margin:0;
padding:0;
overflow:hidden;

}

div#huls {
	margin:auto;
	width:60%;
}
div#container{
	position:absolute;
	width:800px;
	height:100%;
	margin:auto;
	z-index:1002;
	background-color: white;
	opacity: 0.8;
	filter:alpha(opacity=50); !important
	
}

div#background {
	float:left
	width:750px;
	height:100%;
	z-index:1002;
	background-color: white;
	}
	
div#lipsum{
	font-family:Arial, Helvetica, sans-serif;
	float:left;
	padding:10px;
	margin:auto;
	width:100%;
	height:100%;
	color:#0066FF;
	z-index:1003;
	}
	
#header{
	width:800px;
	height:30px;
	z-index:1002;
	height:69px;
	float:left;
	margin:0;
	color:#0066FF;
}

[J2kq]

Hi all - all very useful thank you also to codeMode who gave me this link:

http://www.mandarind...om/opacity.html

I still have problem with the text being %-transparent using the following css - what am I missing here - would like the text to be 100% full white at all times just having the transparency changing on hover..:-/

.trspbox 
{ 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
background-color: #06075a; 
opacity:.50; 
filter: alpha(opacity=50); 
-moz-opacity: 0.5; 
visibility: visible; 
float: left; 
}

.trspbox a:
{ 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
width: 100%;
background-color: #06075a; 
opacity:.50; 
filter: alpha(opacity=50); 
-moz-opacity: 0.5; 
visibility: visible; 
float: left;  
}

.trspbox a:hover
{ 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
width: 100%;
background-color: #06075a; 
opacity:.90; 
filter: alpha(opacity=90); 
-moz-opacity: 0.9; 
visibility: visible; 
float: left;  
}


.trspbox a:visited
{ 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
width: 100%;
background-color: #06075a; 
opacity:.50; 
filter: alpha(opacity=50); 
-moz-opacity: 0.5; 
visibility: visible; 
float: left;  
}

[jelthure]

J2kq, on 12 Aug, 2008 - 05:22 AM, said:

- would like the text to be 100% full white at all times just having the transparency changing on hover..:-/

use this code instead

.trspbox a:link, .trspbox a:active, .trspbox a:visited { 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
width: 100%;
background-color: #06075a; 
visibility: visible; 
float: left;  
}

.trspbox a:hover
{ 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
width: 100%;
background-color: #06075a; 
opacity:.90; 
filter: alpha(opacity=90); 
-moz-opacity: 0.9; 
visibility: visible; 
float: left;  
}

[J2kq]

hi all

still had problems with it working until I went back to basics and looked at the css snippet (skyhawk/snoj) - if there is anyone who has been following this being a beginner as I am here is a few comments I figured out - no offence to you guys who are good at this but might be useful for some like me...;-)

(changed colours in the end but it will give you the idea.)

• enter your image or colour in a table or box using class="trspboxL1"
• make a layer lining up with your area - however make sure that the anchor of the layer is outside the "trspboxL1-class"
• add your text or navbar on the layer using class="boxcont" and do not forget the z-indexes

that will do it - anyway on mac (safari and firefox)

good luck!


css code: (could be simplified but nevertheless)

.trspboxL1 { 
background-color: #06075a; 
width: 100%; 
opacity:.70; 
filter: alpha(opacity=70); 
-moz-opacity: 0.7; 
visibility: visible; 
float: left; 
z-index: 99;}

.boxcont { 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
visibility: visible; 
float: left; 
padding: 1px; 
z-index: 101;
}

.boxcont a:link { 
color: #99f; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
background-color: transparent; 
text-decoration: none; 
visibility: visible; 
float: left; 
padding: 1px; 
z-index: 101;
 }

.boxcont a:visited { 
color: #99f; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
background-color: transparent; 
text-decoration: none; 
visibility: visible; 
float: left; 
padding: 1px; 
z-index: 101;
 }

.boxcont a:hover { 
color: #fff; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
background-color: #06075a; 
width: 100%; 
visibility: visible; 
float: left; 
padding: 1px; 
z-index: 101;
}


.boxcont a:active { 
color: #99f; 
font-size: 10px; 
font-family: verdana; 
font-weight: bold; 
text-decoration: none; 
background-color: #06075a; 
visibility: visible; 
float: left; 
padding: 1px; 
z-index: 101;
}