wlsy » css

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

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 — Sat, 16 May 2009 12:39:30 +0000

其实叫栅格系统还是网格系统（Grid System）也没有明确的说明，早些看到一些关于栅格设计的文章，不过理论性偏强，不太容易理解，自己很早就想写篇相关文章，不过前几天去了灾区，所以就拖到现在了。我还喜欢从实际的例子中来了解，如果你对栅格有了初步了解可以直接跳至下面，那里有延续阅读，链接到众多业界人对栅格系统设计的理解。

好吧，折磨开始。栅格设计有嘛好的？维基百科中给栅格设计的定义特征和原则为：

栅格设计的特点是重视比例、秩序、连续感和现代感。以及对存在于版面上的元素进行规划、组合、保持平衡或者打破平衡，以便让信息可以更快速、更便捷、更系统和更有效率的读取；另外最重要的一点是，负空间的规划（即：留白）也是栅格系统设计当中非常重要的部分。

我个人认为栅格设计主要有这几个特征：

既然是以“格子”来设计，那么就要有一定的规范和比例性，也就是能够快速的对页面进行重组而不失比例。比如你有好几个方块，你向别人介绍的时候说的是这个宽有5个方块的宽而不会在精确的说我的宽是540px，这在团队合作的时候优势的很明显的，界面设计师不必要想前端工程师说具体的数值，他们在这个栅格系统下就好比如有共同语言，而且在保持页面的规范也很有帮助，当然栅格设计的优势不仅仅这些。

不过我不认为栅格设计都适用与所有网站，对于诸如没有重复设计的个人网站博客或者其他网站来说根本没必要把简单的问题复杂化，可以很直观的设计比如主体宽多少，边栏宽多少，但是对于大型门户网站来说应用栅格设计效率的提升是明显的。

好吧，说的我都想睡觉了，看例子。

在第一张图中我们看到这个网站的界面设计并没有什么特别的，普通的三栏设计。在第二张图中很清晰的看到的，网站三栏设计都是很规则的按照比例来，也就是它具有很明显的栅格设计特征。横向有12栏，每个栏宽度60px，栏之间的间距（可以叫槽Gutter）为20px，实际上是每个栏的左右空白边为10px。

这样算下来Full Width=12×（60+10+10）=960px，而实际的Content Width:为940px，因为扣掉左右两边各10的空白边。为了能够更直白的理解可以看这张图：

如果曾经有稍微研究过的童鞋应该会发现这个貌似应用了960GS。是的确实是这样的。960GS是我比较喜欢的一个栅格系统设计框架，主要是代码清晰易懂，而且在第一行和最后一行不需要进行特别的处理。960GS官方给出的演示有12栏和16栏，栏数越多也就是代表着在同样的宽度下栏宽越小，灵活性也就越大，能够组合数也就越多。

好的现在来看看960GS这个栅格系统框架的主要代码：

   1: <div class="container_12">   2:     <div class="grid_8">   3:             ...   4:     div>   5:     <div class="grid_4">   6:             ...   7:     div>   8: div>

container_12代表为主体为12个栏，grid_n这个代表有几个栏宽的宽度。从上面的代码可以看出这个是个两栏的布局，左边有8个栏（注意这些栏的宽度是包含空白边的），右边有4个栏。根据上面知道在12栏中每个栏的实际宽度为：80px=60px+10px+10px，这样我们就很容易的算出演示代码中左边的宽度为640px，右边的宽度为320px。

我想有人会问了不就是两个栏的布局吗，何必弄的这么复杂呢？在上面我就说了，对于小型网站确实没必要这样，但是对于大型网站的前端工作者来说可以大大提升他们的效率，在团队合作中亦是这样。在代码中我们看到在传递宽度的大小的时候已经从精确多少px转变成了是几个栏的问题，而且在以后想改变某个布局的宽度的时候也很简单，比如左边可以变为grid_9,右边为grid_3。如果说当时css的出现并取代table布局大大的方便的前端工作者，那么栅格的出现也就是更进一步的方便了前端工作者。

当然960GS不止这么简单，想进一步了解的话可以访问官方网站http://960.gs/

好了，我们现在返回去理解栅格系统设计。

1：在上面那个例子中的第二张图我们可以通俗的讲网站的设计是基于某个宽度的“格子”来设计。

2：在基于这种“格子”来设计，它看起来很规范和易读的。

3：在基于这种“格子”来设计，它看起来是相当的灵活，在想改变布局的时候也是很简单的。

从CSS框架上理解栅格是个好方法，另外目前大部分的栅格系统布局都是定宽的，如果需要流体布局可以参考960GS的衍生版本Fluid 960 Grid System。类似960GS这样的框架还有：blueprintcss，YUI Grids CSS，等等，而在进行画图是如果需要配合栅格来画图可以在这里下载到psd分层模板。

当然这篇文章只是初步的介绍栅格系统设计，如果有兴趣可以继续阅读我整理的资料：

栅格：1）从混乱到秩序2）一以贯之3）灵活应变（这个系列文章能帮你初步了解栅格，并劝告你在设计栅格系统时应该让栅格去适应元素的混合，而不是要强制元素去适应栅格）

网页的栅格系统设计（这一篇更加深入的讲解栅格系统设计）

网页栅格系统研究：960的秘密，蛋糕的切法，粒度问题，技术实现（这是淘宝玉伯对栅格的研究）

如果英文比较好的可以看这些：

Five simple steps to designing grid systems：Subdividing ratios，Ratios and complex grid systems，Grid systems for web design: Part 1，Part 2 Fixed，Part 3 Fluid。

或者其实你完全可以自己在Google输入栅格或grid system，看看国内外的人们对栅格的理解。