Opacity CSS that works for all browsers?
17,232
Solution 1
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;
}
Solution 2
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/
Related videos on Youtube
Author by
Erik
Christian, Father, Husband, Servant, Runner, SoCal Native, and forgiven, acting on my Faith in Jesus Christ as a new creation on good soil.
Updated on June 21, 2020Comments
-
Erik almost 4 years
Can someone recommend the safest approach for giving an OPACITY VALUE to a DIV TAG using CSS?
Erik
-
Erik about 13 yearsIf i want the transparency to 100% is it "1" or "1.0"?
-
eselk over 10 years100% transparency = 0 -- because the setting is Opacity.
-
basZero over 10 yearsWhat about IE9 and IE10 ?
-
Justin Niessner over 10 years@basZero - IE9 and 10 should either use the
-ms-filter
oropacity
.