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

不知何时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以上支持良好


再介绍一种用jQuery实现的方法,假如我们知道用作背景的图片的宽高比大于还是小于浏览器窗口的宽高比则整个想法会变得非常简单,假如图片的宽高比小于浏览器窗口的宽高比,我们可以只设置宽度为100%来填充整个窗口,相反,只需设置高度为100%来填充。

浏览器支持情况:

  • IE7+
  • 其他大部分桌面浏览器

这里我们没有考虑到各种屏幕大小,仅使用了一张图片。假设在iphone上使用1024px的尺寸显然是不太合理的。对此我们做出优化,当然我们得事先准备好多张图片,像1024.jpg,1280.jpg,1366.jpg等,然后动态载入合适的图片。

这里介绍的方法效果比较好,还有一些不太常用的方法效果不是很理想,有兴趣的朋友可以查看原文链接

发表评论

电子邮件地址不会被公开。 必填项已用*标注