HTML Transparency

Factual Questions
1

Is there a way to put an image as a background in a table, yet have it be slightly transparent (so the main page’s background will show through)? Thanks!

2

IE5 (or is it IE4) and above will obey alpha filters. In addition to your background=“img.gif”, give the table a class=“foo” and define .foo in your stylesheet as:

.foo { filter:alpha(opacity=X); }

where X is a number between 0 and 100, 100 being totally opaque.

It works best on GIFs; it will work on JPGs to a certain extent. You will see what I mean.

3

Awesome, thanks…but how do I go about implementing that?

4

<link rel=“stylesheet” href=“yourcssfile.css” type=“text/css”>

5

To follow on from Lib, you need CSS information. You can do that as an external stylesheet (as above) or in the header section of the webpage. For the latter:


<head>
    <style type="text/css">
        .foo { filter:alpha(opacity=X); }
    </style>
</head>

And then in the table code:


<table class="foo" background="img.gif"> ... </table>

You can define any name for the class; “foo” is just an example.

6

Great, thanks everyone, but I encountered an interesting problem with this. Here is the webpage where I placed the code:

http://www.nintendovision.com/order.htm

As you can see, the cells with the transparent background also made the text transparent, thus impossibile to read. How can I fix this? Thanks.

7

Doesn’t look transparent to me. Of course, I’m using Opera, not IE.

What are you trying to accomplish? It looks as if you are trying to have different color backgrounds for alternating rows. Could you do the same thing just by setting BGCOLORs on your TR tags? For example:


<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY BGCOLOR=GRAY>
<CENTER>
<TABLE>
<TR BGCOLOR=BLACK>
<TD><FONT COLOR=WHITE>One Cell</FONT></TD>
</TR>
<TR BGCOLOR=WHITE>
<TD><FONT COLOR=BLACK>Two Cell</FONT></TD>
</TR>
<TR BGCOLOR=RED>
<TD><FONT COLOR=YELLOW>Red Cell</FONT></TD>
</TR>
<TR BGCOLOR=BLUE>
<TD><FONT COLOR=WHITE>Blue Cell</FONT></TD>
</TR>
</TABLE>
</CENTER>
</BODY>
8

That’s what I had before, but what I want is for every second column to be slightly transparent so the background will show through (you may not be able to see this because of your broswer). It looks just how I want it in I.E. except for the transparent text.

9

W3C accomplishes something akin to what you want on their CSS page. Here’s the style sheet that matters. Notice the floating navigation bar in the upper-right. (If you can get it to work. I couldn’t, in Internet Explorer, but Mozilla shows it.)

Anyway, the trick is that they set a background image which is simply a PNG file with transparency turned on, in a sort of checkerboard of on and off pixels. As you can see, the text is still quite readable, so you may want to look into it.

10

I don’t know if it matters, Duderdude2, but on your page using Netscape 7, I see no background image at all. The cells are grey with white text. IE 6 shows the image, but no text.

On the page that Achernar linked to, Netscape displays it fine while IE displays the floating navigation bar as opaque.

Have fun.
Jim

11

I don’t know if it matters, Duderdude2, but on your page using Netscape 7, I see no background image at all. The cells are grey with white text. IE 6 shows the image, but no text.

On the page that Achernar linked to, Netscape displays it fine while IE displays the floating navigation bar as opaque.

Have fun.
Jim

12

I don’t know if it matters, Duderdude2, but on your page using Netscape 7, I see no background image at all. The cells are grey with white text. IE 6 shows the image, but no text.

On the page that Achernar linked to, Netscape displays it fine while IE displays the floating navigation bar as opaque.

Have fun.
Jim

13

Howabout this:

In the head…



<style type="text/css">
        .foo { filter:alpha(opacity=20); }
        #bar { color : #ffffff; }
</style>

In your td tags:



<td class="foo" id="bar" background=...etc

Ugly and non-compliant, but at least it should work in IE.

14

I’d suggest doing something like what Achernar said. Make a GIF in a checkerboard style, with one pixel being color A, the next color B, the third color A again, and so on. Set one color to be transparent, and have the other color be your desired background color (gray?). Use the image as your background for the table cells. This should work in basically any browser.

15
      • Hint: get a graphics program that can use textures…
        ~
  • By the by, I am writing an applet and alternately need buttons there, and not there. I can’t figure out how to use the remove() method, it don’t work no matter how I try it and I cannot find any examples on the net:
    add is add(componentName);
    that works.
    remove(componentName); only gets me compiler errors, using JCreator and current Sun JDK.
    … Anybody know?
16
  • Well nuts, I had a closing parentheses in the wrong place…-nevermind.
    ~