...

View Full Version : Making the background opacity lower but not the text's opacity



Ranger56
07-06-2005, 05:34 AM
http://www.spiderseatbabies.com/swee/index.html

Is there any way to put a grey background behind the text, and make it's opacity lower but keep the text's opacity at 100%?

Ranger56
07-06-2005, 07:52 PM
Anyone know?

singedpiper
07-06-2005, 08:14 PM
nest two divs... opacity of the bottom one is x% and it has the background opacity of the top one is 100% and the bg is transparent

Ranger56
07-06-2005, 08:29 PM
can you explain or cod e that better please?

singedpiper
07-07-2005, 03:47 AM
<div id="a">
<div id="b">
CONTENT HERE
</div>
</div>




class "a" gets the lowered opacity
class "b" gets full opacity and "background: transparent;"


cya

Ranger56
07-07-2005, 03:48 AM
Thanks.

ArcticFox
07-07-2005, 05:06 AM
Repeating:

As always, you can also 'fake' the transparency: http://arctic.ithium.net/

The BG on the iFrames is edited to look like you're looking through a tinted window, but is not actually transparent thus removing any possible cross-browser issues.

Ranger56
07-07-2005, 10:34 PM
I tried the nested Divs but something went wrong

http://www.spiderseatbabies.com/swee/index.html <<HTML

http://www.spiderseatbabies.com/swee/scott.css <<CSS

The text bg makes it's own box with scroll bars that the textcontent div is in and has scroll bars, and it doesn't work/

Ranger56
07-08-2005, 03:26 AM
please I need help with this.

Ranger56
07-08-2005, 09:16 PM
<div id="a">
<div id="b">
CONTENT HERE
</div>
</div>




class "a" gets the lowered opacity
class "b" gets full opacity and "background: transparent;"


cya


Ok, I tried that, and everthing in the "a" div gets lowered opacity...

http://www.spiderseatbabies.com/swee/index.html

mark87
07-08-2005, 11:04 PM
Are you trying to make it look like the background is seamless? ie. the diagonal lines carry on past the scrollbars?

If so, you could just set the background to the same image but keep it fixed... you may have to play with the margins a bit to get it lined up.

Ranger56
07-08-2005, 11:16 PM
I gave up on it after a few days of nothing working.

ArcticFox
07-11-2005, 01:56 AM
:rolleyes: You must be a young kid - you give up too easily.

We can make it work for you, but if you don't even want to take the time then please don't waste ours. :mad:

Ranger56
07-11-2005, 02:10 AM
:rolleyes: You must be a young kid - you give up too easily.

We can make it work for you, but if you don't even want to take the time then please don't waste ours. :mad:


Go away.

mjy78
01-01-2007, 02:45 AM
Ok, I tried that, and everthing in the "a" div gets lowered opacity...

http://www.spiderseatbabies.com/swee/index.html

Instead if placing div b inside div a, you could place it after it, then use absolute positioning and z-index to put div b on top of div a.

<div id="a" style="position:absolute;z-index:2;top:5;left:5;width:50;height:50;background-color:transparent">Div Contents Here</div>

<div id="b" style="position:absolute;z-index:1;top:5;left:5;width:50;height:50;opacity:0.5"></div>

Of course, opacity:0.5 alone is not enough for complete cross browser compliance, but you get the idea.

arpitap
09-21-2010, 01:45 AM
Instead if placing div b inside div a, you could place it after it, then use absolute positioning and z-index to put div b on top of div a.

<div id="a" style="position:absolute;z-index:2;top:5;left:5;width:50;height:50;background-color:transparent">Div Contents Here</div>

<div id="b" style="position:absolute;z-index:1;top:5;left:5;width:50;height:50;opacity:0.5"></div>

Of course, opacity:0.5 alone is not enough for complete cross browser compliance, but you get the idea.


Thanks mjy78, it worked for me.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum