Topic: Background Opacity at 25% Font at 100% Pages that link to <a href="https://ozoneasylum.com/backlink?for=23679" title="Pages that link to Topic: Background Opacity at 25% Font at 100%" rel="nofollow" >Topic: Background Opacity at 25% Font at 100%\

 
Author Thread
Darko
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Oct 2004

IP logged posted posted 10-16-2004 15:51 Edit Quote

I have been reading myself silly trough different forums but didn't quite find a solution yet. I have started an internet Blog and I would like to make some posts with a 25% opacity layer. Only problem is that this Background layer affects my font.


quote:
<table width="100%" align=center cellpadding=0 cellspacing=0 style="border:1px solid #918779";> <tr><td bgcolor=black style="filter:alpha(opacity=25)">


<font color =#1AD31E><b>testing with green color #1AD31E</b></font>

<font color =#000000><b>testing with black color #000000</b></font>

<font color = #FF0000><b>testing with red color #FF0000</b></font>




I don't know how to script my fonts that they should not be at 25 opacity but at 100 opacity.

(Edited by Darko on 10-16-2004 15:54)

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 10-18-2004 09:12 Edit Quote

try setting the fonts with style="filter:alpha(opacity=100)" if that's what is working for setting the backgorund opacity.

However, you're making a very half-assed attempt at CSS here. Why are you setting properties in the HTML tags *and* setting CSS styles? I would suggest you read some of the basic CSS tutorials at http://www.gurusnetwork.com and http://www.alistapart.com and look very deeply into correctly using CSS.

liorean
Bipolar (III) Inmate

From: Umeå, Sweden
Insane since: Sep 2004

IP logged posted posted 10-18-2004 16:12 Edit Quote

Opacities (-moz-opacity in earlier moz versions, -khtml-opacity in saf1.1, opacity in current saf and moz versions, filter:alpha(opacity:#) in iew) are set on a whole element, not just the background. Opacities are nesting but not inheriting, meaning that an element with 50% opacity nested within another element with 50% opacity will end up being 25% opacity. According to the relevant CSS specs, opacities are normalised to be within the 0%-100% range, thus you can never get any part of an element to have a higher opacity than the base opacity of it's ancestors. If you want to use partial opacities for only backgrounds, there are today three choices: use CSS3 RGBA colours for the background (saf1.2 only), use alpha channel PNG for background (moz, op, saf, iem but not iew), or use a gif where you mix transparent and non-transparent pixels so that it looks like a partial transparency. There is a trick that might work for getting alpha channel PNG to work in ie5.5w and ie6.0w, that relies on using the AlphaImageLoader filter to generate the proper background opacity, though.

--
var Liorean = {
prototype: ProgrammingTheoryGuru.prototype,
abode: "http://codingforums.com/",
profile: "http://codingforums.com/member.php?u=5798"};

iconian
Nervous Wreck (II) Inmate

From: Perth, Western Austrlia
Insane since: Oct 2004

IP logged posted posted 10-20-2004 06:50 Edit Quote

a vairation on this is there a way to to partially fill a div block with white?
for example a 50% white fill?

Matthew

matthew@iconiansolutions.com
www.iconiansolutions.com

Darko
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2004

IP logged posted posted 10-21-2004 00:54 Edit Quote

Thanks for the replies !

Will check it out.

Darko
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2004

IP logged posted posted 10-23-2004 16:50 Edit Quote

The thing is, I want to try to make a 'post' in a personal weblog of mine with a transparent background and text staying in a 100 % opacity. I was trying to combine HTML with CSS tags to find a way to make it possible.
I haven't succeeded yet, but I got very close.

I can't use a gif. PNG doesn't work and I don't know quite how to use CSS3 RGBA in a regular post.

Metzae
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Sep 2006

IP logged posted posted 09-15-2006 08:57 Edit Quote

I've been trying to do this same thing, and someone was able to show me how to do it in IE.

code:
<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>



I'm not 100% on my coding lingo, but the "position: relative;" is apparently the part that separates it from the rest of the faded schtuff, which is why it remains solid while the background fades away.

HOWEVER...it doesn't work with Firefox. Anyone know how to get around this?

(Edited by Metzae on 09-15-2006 08:59)

Suho1004
Maniac (V) Mad Librarian

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 09-15-2006 11:42 Edit Quote

As liorean pointed out above, the different browsers have different ways of implementing opacity (sigh). filter:alpha(opacity) in proprietary IE.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 09-15-2006 16:20 Edit Quote

http://reisio.com/punkid/

jamesm6162
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Nov 2008

IP logged posted posted 11-14-2008 15:31 Edit Quote

Put the element containing the text outside the parent container (e.g. right below) and then use relative/absolute positioning to get it to appear on top of the background. This way the text does not "inherit" the opacity of the background.

Depending on the layout of your page, it might be a bit lousy to get the positioning right, though.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 11-15-2008 01:38 Edit Quote
quote:
reisio said:

http://reisio.com/punkid/

http://reisio.com/temp/punkid/ actually



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu