Topic: Background Opacity at 25% Font at 100%

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)

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.

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"};

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

Thanks for the replies !

Will check it out.

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.

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

<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)

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

http://reisio.com/punkid/

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.

quote:

---

reisio said:

http://reisio.com/punkid/

---

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