CSS实例分析:完美的全页面背景图片

　　我们之前已经知道了可调整大小的背景图片的概念。但是读者Doug Shults发给了我一个链接，其中使用了非常酷的技术，我觉得这种技术要比之前的任何技术都要好。

　　

 

　　上图所展示的背景图片以及所应用的这种技术来源于这个网站。

　　以下是这种技术所要达到的效果：

　　使用图片填充整个页面，没有空白

　　根据需要依比例显示图片

　　保持图片比例

　　图片居中于页面

　　不会有滚动条

　　跨浏览器的兼容性

　　不是某种华丽的伎俩例如Flash

　　这是非常高的要求，我们将使用各种技术来达到这样的效果。首先，由于图片要依比例缩放，传统的background-image属性已经不能够达到这样的效果了，使得我们只能使用行内图片。

　　技术1

　　这个行内图片将会被放置于一系列的封装元素之中，每一个封装元素都是我们为了达成目标所必不可少的。

　　<div id="bg">

　　<div>

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

　　<tr>

　　<td>

　　<img src="images/bg.jpg" alt=""/>

　　</td>

　　</tr>

　　</table>

　　</div>

　　</div>

　　CSS代码是：

　　* {

　　margin: 0;

　　padding: 0;

　　}

　　html, body, #bg, #bg table, #bg td {

　　height:100%;

　　width:100%;

　　overflow:hidden;

　　}

　　#bg {

　　position: fixed;

　　}

　　#bg div {

　　height:200%;

　　left:-50%;

　　position:absolute;

　　top:-50%;

　　width:200%;

　　}

　　#bg td {

　　text-align:center;

　　vertical-align:middle;

　　}

　　#bg img {

　　margin:0 auto;

　　min-height:50%;

　　min-width:50%;

　　}

　　标记语言和CSS确实有些繁琐，但是效果却很好!做完这些已经可以完成工作了，但是如果我们希望页面上有真实的内容会怎样呢?将html和body元素的overflow属性设置为hidden是会让你对这一点有些担心的，因为在一个没有滚动条的网站上，那样会完全切除超出区域范围的内容。为了让可滚动的内容正确显示，我们将要介绍另外一个封装元素。它会位于背景的前面，宽度和高度是完全展开的浏览器的大小，而且将overflow属性设置回auto(可滚动)。然后我们就可以安全的将内容放入这个封装元素之中了。

　　<div id="cont">

　　<div class="box">

　　<!-- content in here -->

　　</div>

　　</div>

　　#cont {

　　position:absolute;

　　top:0;left:0;

　　z-index:70;

　　overflow:auto;

　　}

　　.box {

　　margin: 0 auto;

　　width: 400px;

　　padding: 50px;

　　background: white;

　　padding-bottom:100px;

　　font: 14px/2.2 Georgia, Serif;

　　}

　　查看示例 下载文件

　　目前存在的Bug

　　在Safar4和Chrome中，min-height属性不起作用，不能够垂直适应大小。

　　技术2

　　还是像往常一样，非常感谢Doug Neiner提供了这种方法。

　　这里，我们可以不用JavaScript修复，只用CSS就能做到这一点。图片还是一个行内图片，class名称为”bg”，没有额外的标记语言。这一点会让所有不喜欢额外标记的人满意的。

　　只有一点需要说明的是，这种方法并不能在任何布局下有效，在IE7中它不能居中，在IE6中完全不起作用，而且取决于原始图片的大小，可能不能总是按照比例显示。但是，由于这种方法很简单，而且没有bug，绝对是可供参考的。下面是CSS：

　　img.bg {

　　/* Set rules to fill background */

　　min-height: 100%;

　　min-width: 1024px;

　　/* Set up proportionate scaling */

　　width: 100%;

　　height: auto;

　　/* Set up positioning */

　　position: fixed;

　　top: 0;

　　left: 0;

　　}

　　@media screen and (max-width: 1024px){

　　img.bg {

　　left: 50%;

　　margin-left: -512px; }

　　}

　　div#content {

　　/* This is the only important rule */

　　/* We need our content to show up on top of the background */

　　position: relative;

　　/* These have no effect on the functionality */

　　width: 500px;

　　margin: 0 auto;

　　background: #fff;

　　padding: 20px;

　　font-family: helvetica, arial, sans-serif;

　　font-size: 10pt;

　　line-height: 16pt;

　　-moz-box-shadow: #000 4px 4px 10px;

　　-webkit-box-shadow: #000 4px 4px 10px;

　　}

　　body {

　　/* These rules have no effect on the functionality */

　　/* They are for styling only */

　　margin: 0;

　　padding: 20px 0 0 0;

　　}

　　查看示例

　　原文：Perfect full page background image

评论总数：0 条 [ 查看全部 ] 网友评论