Transparent Background

[heirophant]

I have a layer that I want to have a transparent background when it is displayed and I would like it to be slightly opaque so that the user can distinguish it from the main page. How do I do it?

[ToonMariner]

try

div.layer
{
opacity: .5;
filter: alpha(opacity=50);
}

[WebJoel]

<style type="text/css">
#opaque {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
</style>

This should make a div with the id="opaque" have a 50% opacity (you have to assign a background-color or background-image to it to complete the effect).

So:

<div id="opaque" style="background-color:blue;"><p>your contents here la-la la, etc.</p></div>

should make the background-color of "blue" appear at 50% opacity (it should be see-thru). Unfortunately, I think it also makes any "text" in the DIV be 50% opaque too... so maybe something like adding:

<style type="text/css">
#opaque p {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;}
</style>

after and in addition~to the first STYLE might save you from this... (I haven't tried it myself...)

edit: above beat me to the reply! :p Also correct. I like my 'version' a bit better however, -it is supposed to cater to a broader variety of browsers.

[heirophant]

None of these solutions seem to be working...the text is discolored, though.

[WebJoel]

These work, -and they work on all browsers. I've used this dozens of times before, I assure you. To put it simply, -you must not be doing something right. Can you post your code so that we can prove that this does work? :)

Here is a quick build showing what can be done: