如何实现背景图片缩放效果

wlsy — Tue, 09 Jun 2009 14:57:30 +0000

在如今大屏幕日趋流行的今天，相当多的网站都喜欢用大图片来当背景，但是这也有个问题，小屏幕浏览图片显示不全，大屏幕浏览却不够，如何才能对图片进行缩放呢？

其实在CSS3中有个background-size属性，不过现在基本上没啥浏览器能支持，不过了解下也不错，在W3C中有对它有定义到，可以在这里看详细用法。

当然熟悉AS的朋友也可以用整站flash很容易的实现，本文讨论的是基于css来实现。

其实这也不算是什么技术问题，主要是思路问题。既然不能在CSS里面定义，那么只要在XHTML通过img来插入图片实现“伪背景”。

什么没啥兴趣？来来来看演示（请先用非IE6浏览）这里有演示

怎么样拉拉浏览器是不是很神奇？代码很简单：

   1: <style type="text/css">

   2: * {

   3:     margin:0;

   4:     padding:0;

   5: }

   6: body {

   7:     font:14px/1.6 "Microsoft YaHei";

   8:     background:url(loading.gif) #333 repeat;

   9:     color:#fff;

  10: }

  11: #bj {

  12:     width:100%;

  13:     height:100%;

  14:     position:fixed;

  15:     top:0;

  16:     left:0;

  17:     z-index:1;

  18: }

  19: #main {

  20:     width:100%;

  21:     position:absolute;

  22:     z-index:2;

  23: }

  24: #content {

  25:     width:500px;

  26:     margin:30px auto;

  27:     padding:10px;

  28:     background:#000;

  29:     height:1000px;

  30:     border:1px solid #333;

  31:     -moz-opacity:0.8;

  32:     opacity:0.8;

  33:     filter: Alpha(opacity=80);

  34: }

  35: </style>

  36: <body>

  37: <div id="main">

  38:   <div id="content">

  39:     <h1>CSS背景缩放</h1>

  40:     <p>改变浏览器的窗口看看吧。</p>

  41:   </div>

  42: </div>

  43: <img id="bj" src="bj.jpg" alt="background"/>

  44: </body>

这里真正的背景是id=“bj“这个，而body里面定义的loading.gif是为了在加载背景给访客提示的，因为css里面的会先被读取。

那为什么不能用IE6来浏览呢？因为万恶的IE6不支持position:fixed;解决的方法除了用那个IE7.js，当然你也可以自己些js来让他支持，除此之外还有什么办法呢？答案是有的，比较复杂，需要用到table，你可以在这里看到这个演示，代码如下：

   1: <style type="text/css">

   2: * {

   3:     margin:0;

   4:     padding:0;

   5: }

   6: html, body, #bg, #bg table, #bg td, #main {

   7:     width:100%;

   8:     height:100%;

   9:     overflow:hidden

  10: }

  11: body {

  12:     font:14px/1.6 "Microsoft YaHei";

  13:     background:url(loading.gif) #333 repeat;

  14:     color:#fff;

  15: }

  16: #bg div {

  17:     position:absolute;

  18:     width:200%;

  19:     height:200%;

  20:     top:-50%;

  21:     left:-50%

  22: }

  23: #bg td {

  24:     vertical-align:middle;

  25:     text-align:center

  26: }

  27: #bg img {

  28:     min-height:50%;

  29:     min-width:50%;

  30:     margin:0 auto

  31: }

  32: #main {

  33:     position:absolute;

  34:     top:0;

  35:     left:0;

  36:     z-index:70;

  37:     overflow:auto;

  38: }

  39: #content {

  40:     width:500px;

  41:     margin:30px auto;

  42:     padding:10px;

  43:     background:#000;

  44:     height:1000px;

  45:     border:1px solid #333;

  46:     -moz-opacity:0.8;

  47:     opacity:0.8;

  48:     filter: Alpha(opacity=80);

  49: }

  50: </style>

  51: <body>

  52: <div id="main">

  53:   <div id="content">

  54:     <h1>CSS背景缩放</h1>

  55:     <p>改变浏览器的窗口看看吧。</p>

  56:   </div>

  57: </div>

  58: <div id="bg">

  59:   <div>

  60:     <table cellpadding="0" cellspacing="0">

  61:       <tr>

  62:         <td><img alt="background" src="bj.jpg" /></td>

  63:       </tr>

  64:     </table>

  65:   </div>

  66: </div>

  67: </body>

上面的这个代码参考GOTOCHINA的源码这个代码有个弊端，就是必须很严格的控制背景图片的比例否则在现在各大主流的分辨率下会有留空，经过的调试后推荐比例最好为宽：高=1：0.5。虽然这样可以解决留空问题，但是有时候图片会显示不全。所有各位要用什么方法就自己看了。还是推荐用第一种方法配合ie7.js来解决问题，当然你也可以完成不用管IE6～

wlsy » 背景缩放

如何实现背景图片缩放效果