按比例缩放

用CSS3实现全屏按比例缩放背景图片

折月煮酒 提交于 2019-11-28 23:35:24
平常看到这种效果都是出现在FLASH全屏动画网站上(用AS来控制),今天发现原来CSS也可以实现这种效果。 核心代码: html { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 这种方法只支持Safari 3+,Chrome+,IE 9+, Opera 10+, FireFox 3.6+的浏览器。 具体的请移步这里,国外的一篇文章,有详细的方法介绍: http://css-tricks.com/perfect-full-page-background-image/ 这篇文章里的一个示例(这种方法支持的比较好,经测试支持IE7,不支持IE6): http://css-tricks.com/examples/FullPageBackgroundImage/css-1.php 文章的另一个示例(用jQuery实现,支持IE7+ / Chrome / FireFox / Opera / Safari,但不支持IE6): http://css-tricks.com/examples