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

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