HTML AND CSS: semi transparent background but with full opacity text

Tact · 27-Oct-2003, 09:42 PM #1

hi. i was having a bit of trouble figuring this out. i hope you guys can help me. but i was wondering how i can get semi transparent backgrounds (mainly an ifram including its scrollbar) but still have the text and content to be um...NOT transparent.

i've familiar with the div trick for setting a bg and the only two options i found were using the "filter: alpha (opacity=XX)" option and the other one where you allow transparencys in the ifram tag and then say this in the html file you want transparent: <body style="background-color: transparent;">

the thing is, that with option one, EVERYTHING gets faded and semi transparent including text.

while for the second option, though the text is not transparent, the background is completely transparent rather than SEMI transparent.

so i was wondering if there was a way to have a semi transparent ifram (including scrollbar) as in the "filter:alpha" option, but still have full text as in the second option. is there any other way i don't know of?

please let me know. i was trying to figure out how to specify the opacity in the second option but i don't know how.

thanks in advance.

Snake~eyes · 27-Oct-2003, 10:06 PM #2

I'm not really sure you kind of lost me. Do you know of an example that I can look at?

Tact · 28-Oct-2003, 02:26 PM #3

sure. well the first option is this.

inside either a table tag, or the body tag, even a div tag and the actual "iframe" tag, you can add this css style that makes each of those properties semi transparent. and it would look something like this:

<body style="filter: alpha (opacity=50)">

in here, the entire body of the html will be given an opacity, ranging from 0 to 100. 0 being completely transparent, and 100 being not transparent at all. and 50 being somewhere in the midde hence, semi transparency. its a really neat effect.

the down side to this, is tha it makes all of the content in the body transparent as well. as in the text, and any images or whatever i might have on the page. whether i apply this style in the body tag, the ifram tag, or a div tag. its all the same.

the other option i have found available to me is one that makes a table or iframe transparent, BUT not the content, (like the text). however what i don't like about this options is that it makes the iframe COMPLETELY see through. and i only want it SEMI- see through. semi transparent. this code works like this.

in the ifram tag <iframe src="blahblah.htm"></iframe> you would put this inside it like so:

<iframe src="blahblah.htm" allowtransparency="true">

and then in the actually html file tha you want IN the iframe, you would put this int he body tag:

<body style="background-color: transparent;">

this is cool and all, it only makes the background transparent but not the text, however i can't figure out a way to change HOW transparent it really is. and that's my problem.

for a visual example. try looking at this.

http://ere-serene.org/transparentscrollbars.php

right here she talks about scrollbars but it can be applied to the whole iframe or specific tables and divs real easily so that's not important. this is just an example so you can see what i have right now, and what i'm trying to get. if you read the last sentense in her tutorial, she says: "That's all 0.o Keep in mind that whatever you put your opacity as, your text gets more transparent too. Easy site made, with transparent scrollbars!"

and tha's what i don't want. and what i'm trying to figure out. how to get semi transparency background and scrollbars, without semi transparent text.

let me know if you know.

thanks again and i hope tha clarifies things.

Corrosive · 28-Oct-2003, 03:07 PM #4

Personally, I've never heard of being able to do this - I'm going to do some research into it now because it sounds too interesting.

Meanwhile, I'll make a quick guess at a possible work around. From the looks of the syntax, it was not really designed with text in mind. So, you may have to create seperate classes for it to work.

My stylesheet would like so:
.background
{
filter: alpha (opacity=50);
}

.textontop
{
color: luminous orange (

)
background-color: transparent;
}

I hope that works.

Tact · 30-Oct-2003, 11:41 PM #5

ok. i tried out your idea and sadly, didn't work. but i think you might be on to something. there should be some declaration (or whatever its called) out there that would tell the browser to not fade the text or control the text and the frame seperately rather than together. but i cna't figure out waht. maybe if i found out how i could fade only text, then i should be able to give it a percentage of 100.

anyone else have any ideas?

Corrosive · 31-Oct-2003, 03:09 PM #6

Actually, now I've thought about it a little more, I doubt that it would work with frames. Because it's two seperate pages, I doubt you could get them to merge together in this way.

Frames are becomeing a bit of a no-no in design anyway, so it may be worth adjusting your page so that the navigation (I presume the frames for that purpose) is on the same page. Ideally, you'd want to use CSS positioning and everything and you should be able to create a fast loading and very good looking page!

Tact · 01-Nov-2003, 08:18 PM #7

the thing is i've already got it working. i just want to specify more clearly to the browser that i don't want the text faded. the cool thing about the method i'm using is that i can apply it anywhere.

i can put it in the iframe tag. AND i can put it in the actual page that is going to be in the ifram as well inside the body tag, or even the tables if i wish. its practically stand alone and independent from anything outside such as the page that holds the iframe itself.

and i understand that frames are "not recommended" online. this is mostly an offline thing i'm messing with. and frames are always good imo. unless the designer is dumb enough to lock poeple out of the menu and not leaving a link back to the main page somehow and poeple gettting stuck. *rolls eyes* pfft.

that's like the only downside. (aside from compatability with other browsers which is an issue i always take into consideration anyway)

and the ifram isn't for navigation. its my blog. (damn blogs so popular these days). i coudln't help myself and felt the need to make one too and i'm trying to make it all kewl and stylish. ya know how it is. i'm trying to compete with the girls that seem to make the most amazing layouts and seem to be the ones that make the most blogs in the first place. i'll be using mine to keep records on the html changes i make and design issues i come across when messing with the style sheets, thumbnails and graphics in my site.

tha'ts pretty much it. i just finished applying this neat trick of using rollovers without needing any preloading because all of the instances are on a single image and i use css instead of javascript. really awesome.

aside from that. i could really use that code that could allow me to control the text and the background seperately. (/me thinks). hey, what if i can use the transparency style inside the font tag! wow. never thought of that. i gotta try that.

if anyone else has any other ideas. i'd really appreciate it.

and btw, thanks for the tips corrosive.

Tact · 05-Nov-2003, 01:47 AM #8

aw darnet. didn't work. anyone have any ideas?

pop345_ca · 10-Nov-2003, 09:46 PM #9

yo ~ i gotta idea... and it usually works .w most browsers... wut u do is force 100% not transparent on ta text by declaring ta style
like
<style type ="css/text"><!-- A:active{color:E9A63B;font-weight:none;font-family:"Arial";text-decoration:none;font-size:13;filter:alpha (opacity=100);}

that is for active links...

den put ta filter:alpha (opacity=100); in the table / div or frame... not sure if it'll work 4 ta pics... but i noe it works for text usually...

pop345_ca · 10-Nov-2003, 09:48 PM **#10**

* i mean like another opacity in the table / div / frame tag

Tact · 11-Nov-2003, 01:57 PM **#11**

oh i get it. yeah it sounds like it works. its like the tags in the body tag that would be like

<body text=000000 alink=ffffff vlink=blue alink=red link=whatever>

and so i would use css to modify those specifically, and then have another on the iframe/table that is faded. and the text SHOULD be nice and opaque. awesome. i can't wait to try it. thanks a lot for the idea.

i might have to put another style for font, and text seperately, and see which one controls which and how. but i think i can pull it off.

thanks!

tshrbhag · 02-Dec-2003, 02:16 PM **#12**

Hey guys... thought i could use some help from this topic. i'm trying to acheive the same thing and i'm a bit new to html. if you could tell me exactly how i can do this, i'd appreciate that highly....

Terry

Guy · 04-Dec-2003, 03:00 PM **#13**

Something like this? (I bolded the magic words)

Code:

<html>
<head>
	<title>Test</title>
</head>
<body background="bg.jpg">
<div align="center">

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
	<tr>
	<td><span style="position: relative;"><b>Hello There</b></td>
	</tr>
</table>

</div>
</body>
</html>

Basically when you position the element to relative, it acts like a nested element but the styles do not cascade down onto it.

Tact · 06-Dec-2003, 09:22 PM **#14**

so that's what it was. man. and to think that i already went through hours of trouble making it work by using a background image in the iframe to look like its still teh background image in the page. which i should have prolly done int he begining but didnt want to.

if i'm not to tired, i'll definately test it or isntead use it on somthing else cause i'm already done with that section on my site. lol. thanks though. i'm even more sure this will work if i ever need to apply such a setting again.

but for now. i'm satisfied wtih what i've done so far.

B-fly · 04-Apr-2005, 03:33 PM **#15**

Hello... I found this thread by Google... and I thought, someone might know how to fix my problem

)

I'm currently working on... wait...

lianne.camera-kid =dot= com

I just started... and I would love to make the shadow (from the left border) semi-transparent but omg H.O.W.... I tried everything but nothing works. Could anyone help me out?

Tag Cloud
acer asus bios blue screen boot bsod computer crash drive driver drivers error ethernet excel freeze gaming hard drive hardware hdmi internet laptop malware memory missing monitor motherboard mouse network networking printer problem ram registry router slow software sound toshiba trojan usb video virus vista wifi windows windows 7 windows 7 32 bit windows 7 64 bit windows xp wireless

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for:

Find the solution to yourcomputer problem!

Find the solution to your
computer problem!