点击下载
本文文档

当前位置：首页 - 科技 - 知识百科 - 正文

总结HTML全屏背景的方法

来源：动视网责编：小采时间：2020-11-27 15:34:09

总结HTML全屏背景的方法

总结HTML全屏背景的方法:全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制)；另一种就是通过我们熟悉的javascript去实现，这里为了代码方便就直接使用jQuery了。既

推荐度：

点击下载本文 文档为doc格式

导读总结HTML全屏背景的方法:全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过CSS去实现的(CSS3.0为我们提供了更为丰富的CSS样式控制)；另一种就是通过我们熟悉的javascript去实现，这里为了代码方便就直接使用jQuery了。既

全屏背景是当下比较流行的一种网页设计风格，而具体的实现这样的全屏背景无外乎基本就两种方法，一种的通过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代码：

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

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 CSS 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:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
 <!-- Your site content goes here -->
</div>

To call the jQuery function, add this to the bottom of your web page, right before the closing body tag:

<script type="text/javascript">
$(window).load(function() {
 $("#background").fullBg();
});
</script>

Once again, this plugin is pretty simple so no options are available. It pretty much just does what it does.

总结HTML全屏背景的方法

推荐度：

点击下载本文 文档为doc格式

标签：背景背景图方法

热门焦点

总结HTML全屏背景的方法

总结HTML全屏背景的方法

总结HTML全屏背景的方法

最新推荐

猜你喜欢

热门推荐