semi transparent div in a webpage

Question

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

Solution 1

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
  )";
}

Solution 2

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! ;-)

Solution 3

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.

Comments

[Warty]

The parts hacked in for IE made me wince >_< Sooo ugly and overly complicated compared to the simple CSS counterparts. I wish the IE developers would err... open their eyes and realize the pain web developers are facing, to get compatibility for their application.

[Owen]

So true, but having the option is super nice, as opposed to fudging around with PNG's + pngfix for IE anyways... :)

[JP Silvashy]

So you are just writing the CSS with JavaScript? Why not just write the CSS in the first place?

[Warty]

Or if you're like me, and you're working with your own personal projects for fun, you can just sit back and say "Screw IE" ^_^

[Warty]

He said he was fine with using JS. In my case, I don't work much with the "classic" elements, such as div, span, whatever. I've been playing with canvas exclusively. Because of this, I don't really use stylesheets anymore. Since I work with JavaScript so much, I find it messy if i have a ton of CSS and a ton of JavaScript all over, messing with the style of an element. Of course, if you're designing a static-ish website, using the <style> tag is fine.