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

http://www.itjxue.com  2015-08-07 21:29  来源:未知  点击次数: 

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

fullpagebackground.jpg

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

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

  • 使用图片填充整个页面,没有空白
  • 根据需要依比例显示图片
  • 保持图片比例
  • 图片居中于页面
  • 不会有滚动条
  • 跨浏览器的兼容性
  • 不是某种华丽的伎俩例如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

(责任编辑:IT教学网)

更多