By

字数 707 字 阅读时长 ≈ 3 分钟

文章目录

碰到一个客户网站的首页需要参考以纯Yishion官网的处理方式，并且不用flash实现。

这个需求基本上可以概括为两点：

  1. 背景图覆盖全屏

  2. 背景图要做到浏览器自适应（同时适应高度和宽度）

脑袋里理了一下思路，直接用CSS设置背景基本上不太可能办到了。于是开始自己整理js实现的思路。

  1. 将图片独立出来，用CSS控制它position:absolute; 然后放置到最底层z-index:-1;

  2. 使用js控制其跟随页面变化，但是考虑到图片变形，因此不能直接跟着页面宽高而变化，需要按照比例。例如宽度如果小于高度与宽度的比例值，则宽度不能再缩小了，只缩小高度。

今天心情比较舒畅，索性把这个功能做成了一个插件。由于托管在Github，可能有些时候直接下载资源包会有问题，可以到 https://github.com/gsgundam/jQuery.resBg 直接引用或拷贝文件。

下载插件

效果基本没问题，下面用一个html文件讲解使用方法（特别说明一下参数position，主要用途是控制是否可以查看整个背景，简单来说就是使用absolute时可能出现滚动条，而fixed不会）:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="jQuery.resBg - 一个简单的自适应页面背景插件" />
<meta name="description" content="jQuery.resBg - 一个简单的自适应页面背景插件" />
<meta name="author" content="gsgundam" />
<title>jQuery.resBg - 一个简单的自适应页面背景插件</title>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script src="js/jQuery.resBg.min.js"></script>
<script>
$(document).ready(function() {
    $("#bg").resBg({
        position: 'absolute' //可选， 'absolute'或'fixed'
    });
});
</script>

</head>

<body>
<img src="img/bg.jpg" class="resBg" id="bg" />  <!-- 使用resBg类来明确背景图片,一定要放在<body>层 -->
<div>
  <p style="color:#eee; display:block; font-size:36px; text-align:center; font-family:arial, '微软雅黑'; margin-top:60px;">STEVE JOBS' WORK</p>
  <p style="color:#eee; display:block; text-align:center; font-family:arial, '微软雅黑';"> 这是一个演示网站，背景大小会随着浏览器大小改变<br>This is a demo. The background picture will resize when your browser size changes.</p>
</div>

</body>
</html>

欢迎有人来指出问题，提出建议。我会尽量完善。

♦ 本文固定连接：https://www.gsgundam.com/archive/2014-01-21-jquery-resbg-responsive-background-picture-plugin/

♦ 转载请注明：GSGundam 2014年01月21日发布于 GSGUNDAM砍柴工

♦ 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

♦ 原创不易，如果页面上有适合你的广告，不妨点击一下看看，支持作者。（广告来源：Google Adsense）

♦ 本文总阅读量次

推荐文章