Translucent web page div

Question

Hi, I am creating a site where I want to display a div with a translucent background so that the page background is visible. I want this to work in all browsers. I use CSS, JS or jquery ... please give me some tips and, if possible, sample code.

Thanks in advance, Raj

Answer 1

It is probably best to use pure CSS. This method works on Safari 3.2+, IE 5.5+, Firefox 3.05+, Chrome 4+ and Opera 10+

div { /* black for browsers which cannot support rgba */ background-color: #000; /* 70% opacity for supported browsers */ background-color: rgba(0, 0, 0, 0.7); /* IE 5.5+ support #BB000000 is ~70% opacity on black */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr=#BB000000, endColorstr=#BB000000 ); /* IE 8 support */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr=#BB000000, endColorstr=#BB000000 )"; } 

Answer 2

If you use opacity , the entire div, including text, will be at this opacity level.

If your visitors use Webkit (Chrome, Safari) or Gecko (Firefox) (probably Presto (Opera), but I'm not sure), you can use:

#divToMakePartiallyOpaque {background-color: rgba(150,150,150,0.5); }

In cases where the red, green, and blue channels are set to 150 and the alpha is set to 0.5 (halfway between fully transparent and completely opaque).

It is also possible to use a partially transparent background image, as indicated elsewhere.

Answer 3

For CSS-compatible browsers: Element.style.opacity = decimal from 0-1
For IE [aka, devil]: element.style.filter = "alpha (opacity =" + (Number from 0-100) + ")"

Examples: http://www.w3schools.com/Css/css_image_transparency.asp

Note that the text / content in the div will also become translucent.

An example that sets the opacity of a div to 50%:

 var myElement = document.body.getElementById("elemId"); myElement.style.opacity = 0.5; myElement.style.filter = "alpha(opacity=50)"; //For the devil, IE 

By the way, 1 [or in the case of IE, 100] is completely visible, and 0 is completely transparent.

Hope this helps !; -)

Answer 4

You can also use translucent PNG. IE 6 does not support translucency, as far as I know, but I believe that IE7 + and other browsers are the main browser.

Answer 5

If you are fine with jQuery, the following versions will work for all browsers supported by jQuery: Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+, Chrome 1+):

 $('div').css('opacity', 0.5); 

Answer 6

Elmo said or:

 opacity= .5; filter:Alpha(opacity=50); background-color: rgba(0, 0, 0, 0.7);