Advertisement

There's no such thing as a stupid question, but they're the easiest to answer.
Login
Search

Advertisement

Software Development Software Development
Search Search
Search for:
Tech Support Guy > > >

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


(!)

Tact's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
27-Oct-2003, 09:42 PM #1
HTML AND CSS: semi transparent background but with full opacity text
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's Avatar
Snake~eyes Snake~eyes is offline
Senior Member with 640 posts.
 
Join Date: Apr 2002
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's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
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's Avatar
Senior Member with 1,058 posts.
 
Join Date: Jan 2003
Location: Scotland
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's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
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's Avatar
Senior Member with 1,058 posts.
 
Join Date: Jan 2003
Location: Scotland
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's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
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's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
05-Nov-2003, 01:47 AM #8
aw darnet. didn't work. anyone have any ideas?
pop345_ca's Avatar
pop345_ca pop345_ca is offline
Junior Member with 2 posts.
 
Join Date: Nov 2003
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's Avatar
pop345_ca pop345_ca is offline
Junior Member with 2 posts.
 
Join Date: Nov 2003
10-Nov-2003, 09:48 PM #10
* i mean like another opacity in the table / div / frame tag
Tact's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
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's Avatar
tshrbhag tshrbhag is offline
Junior Member with 1 posts.
 
Join Date: Dec 2003
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's Avatar
Guy Guy is offline
Member with 260 posts.
 
Join Date: Feb 1999
Location: abby, BC, canada
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's Avatar
Tact Tact is offline
Member with 494 posts.
THREAD STARTER
 
Join Date: Sep 2002
Location: California
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's Avatar
B-fly B-fly is offline
Junior Member with 2 posts.
 
Join Date: Apr 2005
Experience: Beginner
04-Apr-2005, 02: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?
Email This Email  Print This Print  Bookmark This Bookmark  Tweet This Send to Facebook Send to MySpace Send to StumbleUpon Digg This | More Services More
As Seen On

BBC, Reader's Digest, PC Magazine, Today Show, Money Magazine
WELCOME TO TECH SUPPORT GUY!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.


(clock)
THIS THREAD HAS EXPIRED.
Are you having the same problem? We have volunteers ready to answer your question, but first you'll have to join for free. Need help getting started? Check out our Welcome Guide.

Search Tech Support Guy

Find the solution to your
computer problem!




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


WELCOME
You Are Using: Server ID
Trusted Website Back to the Top ↑