forked: IEでも綺麗に透過pngをOpacityするん Ayumi. Follow 2012-06-27 12:49:19 License: MIT License Fork0 Fav0 View1313 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 7 lines HTML 43 lines CSS 1 lines forked: IEでも綺麗に透過pngをOpacityするん // forked from hiro8619's "forked: IEでも綺麗に透過pngをOpacityするん" http://jsdo.it/hiro8619/2iQN // forked from uupaa's "IEでも綺麗に透過pngをOpacityするん" http://jsdo.it/uupaa/IEAlphaPng_x_Opacity // これ ↓ を手書きしたようなもんです。 // http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo.canvas/3_1_canvas_drawimage.htm // アニメーションはおまけ // AlphaImageLoader(src="***.png") + Alpha(opacity=40)とかはジャギるんです <script> [,]!=0&&(window.onload = function() { var ss = document.createStyleSheet(), ns = document.namespaces; if (!ns["v"]) { ns.add("v", "urn:schemas-microsoft-com:vml", "#default#VML"); ns.add("t", "urn:schemas-microsoft-com:time", "#default#time2"); } ss.cssText = "v\:rect,v\:fill,v\:extrusion{behavior:url(#default#VML);" + "t\:animate{behavior:url(#default#time2);}display:inline-block}"; })(); </script> <table border="1"> <tr> <td align="right">Alphaチャネルをもつpng画像を<img>で表示(opacity=0.4)</td> <td><img src="http://pigs.sourceforge.jp/blog/20100620/images/opacity.png" style="opacity:0.4" /></td> </tr> <tr> <td align="right">filter: AlphaImageLoader() で表示(opacity=1.0)</td> <td> <p style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pigs.sourceforge.jp/blog/20100620/images/opacity.png',sizingMethod=scale); width:400px; height:50px;"></p> </td> </tr> <tr> <td align="right">filter: alpha() + AlphaImageLoader() で表示(opacity=0.4)</td> <td> <p style="filter: alpha(opacity=40) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pigs.sourceforge.jp/blog/20100620/images/opacity.png',sizingMethod=scale); width:400px; height:50px;"></p> </td> </tr> <tr> <td align="right">VMLで表示(opacity=0.4)</td> <td style="height: 100px"> <v:rect id="rect1" style="position: absolute; width: 400px; height: 50px; rotation: 0"> <v:fill id="fill1" type="frame" src="http://pigs.sourceforge.jp/blog/20100620/images/opacity.png" title="" opacity="0.4" /> <v:extrusion id="ext1" on="t" type="perspective" autorotationcenter="t" backdepth="0" edge="0" lightface="f" lockrotationcenter="t" rotationangle="0,0" /> </v:rect> <t:animate targetElement="ext1" attributeName="rotationangle.y" from="-360" to="360" autoReverse="false" begin="rect1.mouseover" end="rect1.click" decelerate="1" dur="3" fill="hold" repeatCount="false" restart="whenNotActive" /> </td> </table> forked: IEでも綺麗に透過pngをOpacityするん body { background-color: #DDDDDD; font: 30px sans-serif; } // forked from hiro8619's "forked: IEでも綺麗に透過pngをOpacityするん" http://jsdo.it/hiro8619/2iQN // forked from uupaa's "IEでも綺麗に透過pngをOpacityするん" http://jsdo.it/uupaa/IEAlphaPng_x_Opacity // これ ↓ を手書きしたようなもんです。 // http://uupaa-js-spinoff.googlecode.com/svn/trunk/uuCanvas.js/demo.canvas/3_1_canvas_drawimage.htm // アニメーションはおまけ // AlphaImageLoader(src="***.png") + Alpha(opacity=40)とかはジャギるんです <script> [,]!=0&&(window.onload = function() { var ss = document.createStyleSheet(), ns = document.namespaces; if (!ns["v"]) { ns.add("v", "urn:schemas-microsoft-com:vml", "#default#VML"); ns.add("t", "urn:schemas-microsoft-com:time", "#default#time2"); } ss.cssText = "v\:rect,v\:fill,v\:extrusion{behavior:url(#default#VML);" + "t\:animate{behavior:url(#default#time2);}display:inline-block}"; })(); </script> <table border="1"> <tr> <td align="right">Alphaチャネルをもつpng画像を<img>で表示(opacity=0.4)</td> <td><img src="http://pigs.sourceforge.jp/blog/20100620/images/opacity.png" style="opacity:0.4" /></td> </tr> <tr> <td align="right">filter: AlphaImageLoader() で表示(opacity=1.0)</td> <td> <p style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pigs.sourceforge.jp/blog/20100620/images/opacity.png',sizingMethod=scale); width:400px; height:50px;"></p> </td> </tr> <tr> <td align="right">filter: alpha() + AlphaImageLoader() で表示(opacity=0.4)</td> <td> <p style="filter: alpha(opacity=40) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pigs.sourceforge.jp/blog/20100620/images/opacity.png',sizingMethod=scale); width:400px; height:50px;"></p> </td> </tr> <tr> <td align="right">VMLで表示(opacity=0.4)</td> <td style="height: 100px"> <v:rect id="rect1" style="position: absolute; width: 400px; height: 50px; rotation: 0"> <v:fill id="fill1" type="frame" src="http://pigs.sourceforge.jp/blog/20100620/images/opacity.png" title="" opacity="0.4" /> <v:extrusion id="ext1" on="t" type="perspective" autorotationcenter="t" backdepth="0" edge="0" lightface="f" lockrotationcenter="t" rotationangle="0,0" /> </v:rect> <t:animate targetElement="ext1" attributeName="rotationangle.y" from="-360" to="360" autoReverse="false" begin="rect1.mouseover" end="rect1.click" decelerate="1" dur="3" fill="hold" repeatCount="false" restart="whenNotActive" /> </td> </table> body { background-color: #DDDDDD; font: 30px sans-serif; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author Ayumi. Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/kAjp/js"></script> AlphaImageLoader Hack IE opacity opacity VML Discussion Questions on this code? Tags AlphaImageLoader Hack IE VML opacity
