Login

Hazzy · 2010-02-11, 05:54 PM

Web Design -> Design -> Art -> Open Canvas, yes? iunno.

I want a table to have a set opacity % background. Not solid black. Not invisilbe. Half way. Ghost like. Google hates me.
Anyone familiar with DreamWeaver, or Web design in general?

butterfλi · 2010-02-11, 06:21 PM

I would do:

Code:
<html>

<style type="text/css">

#table {

      background-image:semiTransparentImage.png;

}

</style>

<div id="table">

<table>

<!--table content here-->

<table>

</div>

<html>

This way just uses and image and places it in the background of the table. If you do opacity you should make sure it works for multiple browsers because different browsers handles transparency differently. Note that using an image would cost more in bandwidth.

Spideyjvc · (This post was last modified: 2010-02-11, 06:35 PM by Spideyjvc.)

Is it a specific table you want transparent, or all of your tables? If you want all of them transparent, add something like this to your CSS sheet:

Code:
.tables (or whatever you named it)

opacity:60 !important;

I don't use programs, so dunno where you'd find it there. I just know how you'd add it manually.

Edit - Thanks for the ninja, Lambda.
I'd rather use opacity than a transparent image though. Most current browsers support it anyway.

Edit 2 - Feel like mentioning this. If you're going to use the above message and have an image already set for the background that scrolls, then you're going to wanna make sure the background for the semi-transparent image scrolls with it as well. To do that, you can add something like this in:

Code:
#table {

              background-image:semiTransparentImage.png;

              background-repeat:no-repeat;

              background-attachment:fixed;

              background-position: +Same+% +As your background image positions+%;

}

If your background image does indeed repeat, then change the no-repeat.

Sn1perJohnE · 2010-02-11, 06:49 PM

Does it have to be in CCS? Sure its more flexible when ya needa change something, but you could have made the table in Photoshop or something with a set opacity and export it as a GIF. Bring it into Dreamweaver and align it and stuff and set the text/images ontop of that, using CSS to resize the image used for the table and such. You could also make a 1x1 GIF with the set color and opacity, export it, and use it with CSS to the size needed. Its similar to using a 100% opacity 1x1 as padding with set dimensions.

Roxas · 2010-02-11, 06:55 PM

http://www.css3.info/preview/opacity/

There.

XTOTHEL · 2010-02-11, 08:28 PM

Sn1perJohnE Wrote:Does it have to be in CCS? Sure its more flexible when ya needa change something, but you could have made the table in Photoshop or something with a set opacity and export it as a GIF. Bring it into Dreamweaver and align it and stuff and set the text/images ontop of that, using CSS to resize the image used for the table and such. You could also make a 1x1 GIF with the set color and opacity, export it, and use it with CSS to the size needed. Its similar to using a 100% opacity 1x1 as padding with set dimensions.

GIF doesn't really allow pixels to be transparent.

You only need:

opacity:0.5;
filter:alpha(opacity=50);

the filter one is for IE, it always needs something special.

Sn1perJohnE · 2010-02-11, 08:32 PM

XTOTHEL Wrote:GIF doesn't really allow pixels to be transparent.

You only need:

opacity:0.5;
filter:alpha(opacity=50);

the filter one is for IE, it always needs something special.

Good point, i forget half the time that Gif is either 100% transparent or its not. Exporting as PNG should still work.

Login
Username:
Password:	Lost Password?
	Remember me