满屏背景图的几种实现方法

不知何时QQ空间的登录页面也设计成一种大背景图片的形式,非常抢眼,在高级浏览器下缩放页面图片保持原样。之前经常会看到这种技术运用在一些比较有艺术感的网站上,我也研究过其代码,做法是用js根据缩放比例乘图片的宽和高,然后重新赋值。这样,浏览器缩小了n倍的同时图片放大了n倍,正好抵消掉,所以图片看上去没什么变化,QQ空间采用的便是这种方法。
full
除此之外,还有一些比较简便的方法,先来看看纯样式的实现:
我们可以通过CSS3的background-size属性来实现,用html元素(html比body好,因为它最接近浏览器高度),再设置背景固定和居中,设置background-size为cover来自适应元素。

曾在new ebay上看到其缩写方式:

浏览器支持情况:

  • Safari 3+
  • Chrome Whatever+
  • IE 9+
  • Opera 10+
  • Firefox 3.6+

当然这还不够,IE9以下不支持CSS3。我们用一个可以在任何浏览器下缩放的inline img元素。用min-height来填充纵向浏览器窗口,设置width 100%来横向填充,设置min-width为图片的宽度来防止图片缩小到小于它的实际宽度。
这里还使用了@media检测浏览器窗口,如果小于图片宽度,就用left 50%和负margin来保持图片居中。

浏览器支持情况:

  • Safari / Chrome / Opera / Firefox支持良好
  • IE6由于不支持fixed定位固没通过
  • IE7/8只是在小尺寸的时候没有居中但还是能充满整个窗口
  • IE9以上支持良好

Continue reading →