transparent background only

I have a div which contains a header and a form.

It floats over other elements and I would like to make it's background transparent.

I can't figure out how to make the background transparent while keeping the input fields, and text fully opaque.

I have tried t开发者_JS百科he following:

var control = $("myControlDiv");
control .show();

control .setStyle({opacity:"0.60", filter:"alpha(opacity=60)"});
var children = control .childElements;

for (var i = 0 ; i < children.length; i++)
    children[i].setStyle({opacity:"1.00", filter:"alpha(opacity=100)"});

Thanks for the help.

You need to set the background, not the opacity.

There are various approaches you can take. The more efficient ones have the poorest browser support. This article describes how to implement them in a backwards compatible fashion.

Well, for all the browsers besides IE you can use the CSS 3 rgba, that sets the color and the alpha, but only for the background (if you set it on background-color, of course). For example, this is how 60% transparent black background color will look in CSS:

background-color:rgba(0,0,0,0.60);

For IE it is more complicated, but there is a great guide for it: http://www.daltonlp.com/view/217

Create a single-pixel PNG with a transparency of 60% (or however much). Set that as your background image.

Just set up a div around the form.

<div style="background:transparent;height:300px;width:300px;"></div>

The way to work around this is to make the outer div relatively positioned and the inner div absolutely positioned. This will allow the inner div to have a different opacity then the outer div. You can check the below link and demo.

http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

demo page http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

The only way you can do this is:

a) Use CSS3, similar to Cokegod's post, which is extremely limiting in terms of demographics, etc.

b) Create a div that houses your content, place your background div within that and apply your opacity setting to the background-layer. Because the opacity/filter is for the entire element, creating a "background" div allows for the opacity to be applied and the container to remain unaffected. It's a little bit of a pain, but it works.

Hope this helps.