總結HTML全螢幕背景的方法-html教學-PHP中文網

全螢幕背景是當下比較流行的一種網頁設計風格，而具體的實現這樣的全螢幕背景無外乎基本就兩種方法，一種的透過CSS去實現的(CSS3.0為我們提供了更為豐富的CSS樣式控制)；另一種就是透過我們熟悉的javascript去實現，這裡為了程式碼方便就直接使用jQuery了。既然提到jQuery，我們就可以想像既然我們能用jQuery寫了，那網路上就一定有類似的寫好的jQuery插件等著我們用了。

方法一、利用CSS3.0樣式新特性實現北京全螢幕 (不支援ie6-8)

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

登入後複製

或：

html{ background:url('background.jpg') no-repeat center center; min-height:100%; background-size:cover; } body{ min-height:100%; }

登入後複製

原理：將html及body設定為最小高度為100%，使用css3中的background-size:cover;將背景圖片設定成封面全螢幕模式。

相容性：

Safari 3+

Chrome Whatever+

IE 9+

Opera 10+

Firefox 3.6+

方法二、使用jQuery實作

HTML程式碼：

登入後複製

CSS程式碼：

#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }

登入後複製

jQuery程式碼：##

$(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); });

登入後複製

#相容性：

IE7+

任何桌面瀏覽器

方法二、使用jQuery實作(附)【使用jQuery外掛程式jQuery.fullBg】

First comes the plugin code:

/** * jQuery.fullBg * Version 1.0 * Copyright (c) 2010 c.bavota - http://bavotasan.com * Dual licensed under MIT and GPL. * Date: 02/23/2010 **/ (function($) { $.fn.fullBg = function(){ var bgImg = $(this); function resizeImg() { var imgwidth = bgImg.width(); var imgheight = bgImg.height(); var winwidth = $(window).width(); var winheight = $(window).height(); var widthratio = winwidth / imgwidth; var heightratio = winheight / imgheight; var widthdiff = heightratio * imgwidth; var heightdiff = widthratio * imgheight; if(heightdiff>winheight) { bgImg.css({ width: winwidth+'px', height: heightdiff+'px' }); } else { bgImg.css({ width: widthdiff+'px', height: winheight+'px' }); } } resizeImg(); $(window).resize(function() { resizeImg(); }); }; })(jQuery)

登入後複製

There is only a little CSS needed for this one:

.fullBg { position: absolute; top: 0; left: 0; overflow: hidden; } #maincontent { position: absolute; top: 0; left: 0; z-index: 50; }

登入後複製

If you want your background to stay fixed you can change the .fullBG to this:

.fullBg { position: fixed; top: 0; left: 0; overflow: hidden; }

登入後複製

For the HTML markup, you can just add an image tag with an id or class, but you also need to add a div that contains your main content or else it won't work properly. This is the bare minimum: