You are viewing an old revision of this post, from 23 oktober 2014 @ 07:46. See below for differences between this version and the current revision.
Demo:
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.
.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:
- 23 oktober 2014 @ 07:48 [Huidige revisie] by Dave Zoontjes
- 23 oktober 2014 @ 07:47 by Dave Zoontjes
- 23 oktober 2014 @ 07:46 by Dave Zoontjes
- 23 oktober 2014 @ 07:46 by Dave Zoontjes
- 23 oktober 2014 @ 07:44 by Dave Zoontjes
- 11 juli 2014 @ 15:19 by Dave Zoontjes
- 11 juli 2014 @ 15:17 by Dave Zoontjes
Changes:
23 oktober 2014 @ 07:46 | Current Revision | ||
---|---|---|---|
Content | |||
Demo: | Demo: | ||
<div class="opacity"> | <div class="opacity"> | ||
<img 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" /> | <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> | </div> | ||
<style type="text/css"> | |||
.opacity img { | |||
/* IE 5-7 */ | |||
filter: alpha(opacity= 50)!important; | |||
/* Netscape */ | |||
-moz-opacity: 0.5!important; | |||
/* Safari 1.x */ | |||
-khtml-opacity: 0.5!important; | |||
/* Good browsers */ | |||
opacity: 0.5!important; | |||
} | |||
</style> | |||
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. | 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.