Topic: 50% opacity div with 100% opacity text (Page 1 of 1)

is it possible?

I know how to use the opacity filter on a layer to create 50% opacity.
However, the opacity is then applied to all elements in this layer - which i don't want.

What i want to do is: I have text before a very light background image and i want to use a semi-transparent layer under the text in order to make the text easier to read. I've tried a web dither which is fine on the darker parts of the image but the text looks jagged on the lighter areas of the background image.
A layer where the background is semi-transparent would be the perfect solution?

I have seen a semi-transparent background on WebFX utilising a 50% opacity PNG image but i can't get this to work as a background.

Any ideas/solutions?

<´¯`·.¸ Patric ¸.·´¯`>

Not sure I will look around and I have never tried it but this is probably not related but I will throw it up anyway. http://faq.ozoneasylum.com/FaqWiki/shownode.php?id=462&sortby=rating

I am not really sure. How 'bout a page to show us what you are doing?

May try putting the text as a different layer and then setting the z-index. Worth a shot.

Later,
C:\


~Binary is best~

Yeah, that is a bit of a bummer.

I got an active x script to load the alpha channel of a PNG I was setting for a background once but it would automatically scale the background image up to fill the entire element. I wanted it to tile so I ditched the idea. If you don't need it to tile and let me know and I'll see if I can dig up the syntax for it.

A couple of suggestions:

Try setting a filter for the text elements and set their opacity to 100%.

Otherwise you could nest two elements inside another one like Cprompt suggested. I'd make both nested elements absolutly positioned. Set the parent block element's size and set overflow:hidden. Make one of the nested elements 100%x100% iin size and set it to a z-index of 1, set background and poacity filter. Set the other nested block element to a z-index of 2 and put your text in it but don't set any height/width properties.

Edit: 3 replies in 4 minuites! Now that's service!

[This message has been edited by Dracusis (edited 10-29-2002).]

Just set an image class with opacity of 50%, and z-index -1 or something low, then leave your div ID or watever as 100% opacity.. then you have 100% opacity text, with a 50% opacity background..

I think thats what your trying to do, but i only learnt css last week so not sure if its the best way

Never ever EVER set z-index -1!

EVER!

Because it will break like you wouldn't belive in some browsers. Setting a negative for that will force it behind the text but you can always find a better solution. In the browsers this doesn't work for the content won't be readable at all.

well set it 1 and everything higher then, i noticed a problem with opera when i set z-1 actually, i thought it just didnt like layer levels at all, ill have to try that out =)

WOW

what a rush of replies... I am impressed guys :-)

ok, i have tried to demonstrate what i want to do here:
http://patricdesign.com/ozones/car.htm

this is actually the approach of setting a divs opacity to 50 and the <p> opacity to 100 which doesn't work, as you can see in on the page.

what would be the best approach? i am a bit reluctant about having 3 nested layers but then again...



<´¯`·.¸ Patric ¸.·´¯`>

ok this is how u do it....

set your div at 100% opacity..

in your css file or wherever put

img.x
{
filter: Alpha(opacity:50);
z-index: 1;
}

#myDiv
{
z-index: 2;
}

then put your div in the html with the ID, and put whatever u want as the background in img tags <img class="x" src="mypic.jpg">

so:

<div ID="myDiv>
<p><img class="x" src="mypic.jpg"></img></p>
<p>Write what u want here</p>
</div>

thats one way to do it anyhow. worked for me but i havnt tested it much - like i said i only learnt css last week



[This message has been edited by H][RO (edited 10-30-2002).]

now what the hell did I just say

Later,
C:\


~Binary is best~