-moz-element使用测试之背景图片旋转实例页面
代码:
CSS代码:
.box { width: 470px; height: 400px; background: -moz-element(#myBg) no-repeat; background: element(#myBg) no-repeat; } .out { position: absolute; left: -999em; }
HTML代码:
<div class="box">【睡着了也要抱着鱼】阿拉斯加... <img src="bear.jpg" /> </div> <div id="myBg" class="out"><img src="mm1.jpg" /></div> <button id="button">点击背景图片旋转</button>
JS代码:
$("#button").click(function() { $("#myBg").css("MozTransform", "rotate(90deg)"); return false; });
效果:
【睡着了也要抱着鱼】阿拉斯加半岛,这只叫尤兰达的灰熊显然累坏了。它跳进河里抓鲑鱼吃,几番折腾下来总算逮住一条,可是它竟然抱着自己的鱼站在水里打起盹来了。不过不幸的是它站的位置不好,这里也是其它灰熊捕鱼和过河的地方,因此一会儿功夫就被一群喧闹的灰熊吵醒了。
![](bear.jpg)
![](bear.jpg)
![](http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg)