CODEWITHSUNDEEP
cssopacity
Erik
Erik

Reputation: 5791

Opacity CSS that works for all browsers?

Can someone recommend the safest approach for giving an OPACITY VALUE to a DIV TAG using CSS?

Erik

Upvotes: 13

Views: 18583

Answers (3)

Niloofar
Niloofar

Reputation: 21

Although CSS 3 introduces the new opacity feature for transparency, it does not support all browsers. This is a CSS trick for transparency in all browsers

.transparent_class {  
 filter: alpha(opacity=50);  
 -moz-opacity: 0.5;  
 -khtml-opacity: 0.5;  
  opacity: 0.5;
}

Upvotes: 0

Hussein
Hussein

Reputation: 42818

This will work in every browser. 

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Or you can use jQuery and do it in a single line

$('div').css({opacity:0.5});

Check working example at http://jsfiddle.net/397jv/

Upvotes: 6

Justin Niessner
Justin Niessner

Reputation: 245509

Straight from Css-Tricks.com (this covers everything I can think of):

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Upvotes: 23

Related Questions