这是最终的效果：What’s The Weather?
不管你怎么变化浏览器窗口大小，背景图始终会自动调节大小。
1 . 第一次方法：
我第一个想法是需要使用一个 css 背景图，如果这张图够大，就能填充整个屏幕。当浏览器窗口大小没有图片大时，它将自动隐藏多余的部分。
- <head>
- ....
- <script type="text/javascript" src="js/jquery.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $("img.source-image").hide();
- var $source = $("img.source-image").attr("src");
- $('#page-body').css({
- 'backgroundImage': 'url(' + $source +')',
- 'backgroundRepeat': 'no-repeat',
- 'backgroundPosition': 'top center'
- });
- });
- </script>
- </head>
- <body id="page-body">
- <img class="source-image" src="images/image.jpg" alt="" />
- </body>
上面的这些代码能够自动隐藏超出浏览器窗口部分的图片(image.jpg)多余部分，不会使浏览器产生滚动条。
这是第一次试验的效果
2 . 第二次方法：
第一次试验的效果并没有达到要求，并不是真的使得背景图片适应窗口大小，应该使用设置“宽度”和“高度”属性来控制图片的大小，如果我们能够得到浏览器窗口显示像素，就可以利用这个数字来控制图片大小，同时保持比例。
使用 jquery 和 dimensions plugin 可以获得这些参数。
- <script type="text/javascript" src="/js/jquery.js"></script>
- <script type="text/javascript" src="/js/jquery.dimensions.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- var $winwidth = $(window).width();
- $("img.source-image").attr({
- width: $winwidth
- });
- $(window).bind("resize", function(){
- var $winwidth = $(window).width();
- $("img.source-image").attr({
- width: $winwidth
- });
- });
- });
- </script>
为了让这张图片更像一个背景图像，我们设置：
- img.source-image {
- position: absolute;
- top: 0;
- left: 0;
- }
因为因为背景图片加上了定位代码，那要加在背景图片上任何东西都需要定位，如果您的背景图像是竖条状的（特别的高），而你的浏览窗口特别的宽，很容易造成背景图片高度超过您的浏览器窗口的高度，为了防止这种情况，需要设定对超出的部分进行隐藏：
- body {
- overflow: hidden;
- }
3 . 第三次方法（最好的）：
Stu Nicholls version给出了最好的方法，这处理方式不需要任何的 JavaScript 就能完美的达到目的。
- #img.source-image {
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- }
在 css 里直接设定背景图片宽度的百分比，这是这个方法的效果。这个方法是最好的，而且不需要任何的 JavaScript 。
相关文章：
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
#
#
#
#
#
#
#
#
#
#
# 体验css+div 之 CSS hack:区分IE6，IE7，firefox
# 体验css+div 之 兼容标准XHTML的浮动层特效实现
# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作
# 体验css+div 之 网页切图过程中div+css命名规则
# 网站用户体验--根据项目需求定义 常用CSS2基本定义例子
# 体验css+div 之 三种使网站背景图片自动适应浏览器大小的方法
# 搜索
# 创建锚链接
# 如何让单行文本框input与多行文本框textarea背景透明
# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行
# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？
# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）
# 体验css+div 之 解决流体布局的问题
# 体验css+div 之 固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
# 体验css+div 之 固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之 固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞
# 体验css+div 之 为什么css+div 会盛行
# 体验css+div中id和class各自的用法及区别
# 体验css+div 之 层叠和特殊性
# css之自动换行
# 体验css+div 之 背景透明内容不透明的写法
# 体验css+div 之 给整个页面添加渐变背景
# 用css样式控制做成的按钮,取代图片按钮
# 体验css+div 之 鼠标经过按钮发生变化效果
# 体验css+div 之 文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div之图像替换 1.徽标图像替换
# 体验css+div 之 使用自动空白边让设计居中
+
