Hey am developing a website where i want to display a div with a semi transparent background so that the page background is visible. i want this to work on all browsers. am fine using CSS , JS or jquery... please give me suggestions and if possible some sample code..

Thanks in advance, Raj

Hey am developing a website where i want to display a div with a semi transparent background so that the page background is visible. i want this to work on all browsers. am fine using CSS , JS or jquery... please give me suggestions and if possible some sample code..

Thanks in advance, Raj

• javascript
• jquery
• css
• html
• transparency

6 Answers 6

Probably your best bet is to use pure CSS. This technique 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
  )";
}

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

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

Note that text/content in the div will become semi-transparent as well.

Example which 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 Totally visible, while 0 is totally transparent.

Hope that helps! ;-)

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

If your visitors are using a Webkit (Chrome, Safari) or Gecko (Firefox) browser (possibly Presto (Opera), too, but I'm not sure) then you could use:

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

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

There's also the possibility of using a partially-transparent background-image, as noted elsewhere.

You could also use a semi-transparent PNG. IE 6 does not support semi-transparency as far as I know, but I believe IE7+ and the rest of the mainstream browsers do.

If you're OK with a jQuery solution, the following will work for all browsers that jQuery supports (Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 9+, Chrome 1+):

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

Elmo saids or:

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