Cross Browser Opacity

5/5(1)

You are viewing an old revision of this post, from 11 juli 2014 @ 15:17. See below for differences between this version and the current revision.

The following snippet has cross-browser fallbacks for the opacity element

.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;
}

Post Revisions:

Changes:

11 juli 2014 @ 15:17Current Revision
Content
  Demo:
The following snippet has cross-browser fallbacks for the opacity element <div class="opacity">
  <img style="opacity: 0.5;-moz-opacity: 0.5;" src="http://sourcelab.davezoontjes.nl/ wp-content/uploads/ 2014/07/mooiv2.jpg" alt="mooiv2" width="450" height="297" class="alignnone size-full wp-image-129" />
  </div>
  The following snippet has cross-browser fallbacks for the opacity element. Keep al users happy with fallbacks and use this fast way of copy paste to accomplish that.
<pre class="lang:default decode:true " >.transparent_class { <pre class="lang:default decode:true " >.transparent_class {
/* IE 8 */  /* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha( Opacity=50)";  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha( Opacity=50)";
/* IE 5-7 */  /* IE 5-7 */
filter: alpha(opacity=50);  filter: alpha(opacity=50);
/* Netscape */  /* Netscape */
-moz-opacity: 0.5;  -moz-opacity: 0.5;
/* Safari 1.x */  /* Safari 1.x */
-khtml-opacity: 0.5;  -khtml-opacity: 0.5;
/* Good browsers */  /* Good browsers */
opacity: 0.5;  opacity: 0.5;
}</pre> }</pre>

Note: Spaces may be added to comparison text to allow better line wrapping.

Please rate this