CODEWITHSUNDEEP
javascriptjquerycsshtmltransparency
Raj
Raj

Reputation: 61

semi transparent div in a webpage

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

Upvotes: 6

Views: 19650

Answers (6)

Virgili Garcia
Virgili Garcia

Reputation: 111

Elmo saids or:

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

Upvotes: 0

Elmo
Elmo

Reputation: 44

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

Upvotes: 0

Owen
Owen

Reputation: 84503

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

Upvotes: 9

David Thomas
David Thomas

Reputation: 253318

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.

Upvotes: 2

Eric
Eric

Reputation: 3334

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.

Upvotes: 0

Warty
Warty

Reputation: 7395

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

Upvotes: 2

Related Questions