Closed Thread Icon

Preserved Topic: Transparency in HTML: Is it possible? Pages that link to <a href="https://ozoneasylum.com/backlink?for=17772" title="Pages that link to Preserved Topic: Transparency in HTML:  Is it possible?" rel="nofollow" >Preserved Topic: Transparency in HTML:  Is it possible?\

 
Author Thread
phuse
Obsessive-Compulsive (I) Inmate

From: Kintuky
Insane since: Jun 2000

posted posted 06-23-2000 18:14

Is it possible to alter the transparency of say, a table, a GIF, or any type of object in a HTML document? In case an example is needed, I mean take a table with a white background and make it so that the background image or whatnot is partially visible through the table. Yeah. =)

I believe that I've seen this before, however, upon looking back I was unable to find anything. I might just be imagining things, but I felt it necessary to ask first.

Any help would be appreciated. Thanks!

-Justin

Wes
Paranoid (IV) Mad Scientist

From: Inside THE BOX
Insane since: May 2000

posted posted 06-23-2000 18:26

You could try creating a lighter version of the background and set it as the background of the table. That should give the appearance that the background is partially visible through the table.

Actually, that sounds like a neat effect...I'm going to have to try that.


Boudga
Maniac (V) Mad Scientist

From: Jacks raging bile duct....
Insane since: Mar 2000

posted posted 06-23-2000 20:51

You could also make a 4pxl x 4pxl transparent gif for the background image.

should look like this:

------------------------------

Boudga
Maniac (V) Mad Scientist

From: Jacks raging bile duct....
Insane since: Mar 2000

posted posted 06-23-2000 20:53

My idea to use text to display a box didn't work right. Hopefully you got the gist of what I was talking about.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 06-23-2000 22:04

Boudga, thats a good trick, does it work pretty well?

Anyway phuse there is no real way to make a truely partially transparent (opaque) image. I know Doc's front door looks like that but really I think that those are solid images that he made in photoshop to look like what is behind it is showing through.

Make's me think Doc are you like me, make the page completely in Photoshop and then hack it up into pieces and make it a page from there?


Walking the Earth like Kane

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 06-23-2000 22:23

There are two ways to create true transparency: One only works in Internet Explorer, and uses style sheets. In the style tag for a div container, say "filter:alpha(opacity=50%);". That should make it 50% transparent. (I may have the wrong syntax there, come back to me if it doesn't work.) Unfortunately, that only works in IE. The other way to make transparent images is with the .png format, which supports partial transparency; I don't know how well Photoshop supports this. Unfortunately, this is not widely supported yet, and every browser claims that they do or will support it soon, except for Internet Explorer for Windows. (IE for macs *will* support png transparency).

The end. =)

phuse
Obsessive-Compulsive (I) Inmate

From: Kintuky
Insane since: Jun 2000

posted posted 06-23-2000 23:50

Nevermind, guys! I got it! Thanks for all the help!

And, by the way, for those interested, it goes like this: You can apply the alpha filter (as Slime said, a CSS feature that only works with IE . . . but that's all explained on Microsoft's site, so go look it up yourselves <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif"> ) to images and whatnot, but not just normal HTML tables. Oh well.

Again, thanks to those who contributed to this thread. Your assistance was appreciated.

?Justin

[This message has been edited by phuse (edited 24-06-2000).]

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted posted 06-25-2000 09:42

I'm coming in here a bit late but you can achieve a pseudo transparency effect in plain old HTML. You can create a dithered image in Photoshop and then save it out as a transparent gif. Once you have that you can place that image on a DIV tag and position it over anything you want, and it looks transparent. I have played around with this method on these two pages:

http://bugimus.com/bugweaver/index.html

http://bugimus.com/bugula/index.html

It's a tedious process, but you can come up with some nifty effects if you need cross-browser compatibility.




[This message has been edited by Bugimus (edited 25-06-2000).]

« BackwardsOnwards »

Show Forum Drop Down Menu