DZ实现全屏背景自动缩放功能 / Discuz教程

实现方法一

© CITYED.CN 版权所有 ; ?3 y& ^( g$ Z, _8 L5 ~9 x7 `1、打开当前模板路径下 common/common.css 样式文件，删除以下代码（去掉原有的背景代码，使后台背景设置失效）：

1. body { {BGCODE}; }

复制代码

" l- \" q; |( ^4 S8 K2、打开当前模板路径下 common/header_common 文件，查找：
© 整站源码 cityed.cn / X& W8 P2 a/ ~+ _4 y4 f8 [! _' R) x

1. <!--{csstemplate}-->

复制代码

© https://cityed.cn 3 ]& Z+ ?! c4 d  h8 a# a在其下方增加：

1. <!--{if (checkmobile() || dstrpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'ipad')) && $_G['uid']}--><style id="bg_mobile" type="text/css">body{background-color: #FFFFFF;}</style><!--{else}--><!--[if (gte IE 9)|(!IE)]><!--><style id="bg_pic" type="text/css">html{background: #DEEFFA url("{IMGDIR}/bg.jpg") no-repeat center top fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}</style><![endif]--><!--[if lte IE 8]><style id="bg_basic" type="text/css">html{background: #DEEFFA url("{IMGDIR}/bg_basic.jpg") repeat fixed;}</style><![endif]--><!--{/if}-->

复制代码

代码解释：
当手机或iPad访问电脑版时，背景设置为纯白色（因为手机和iPad上会自动全屏网页，无必要设置背景，设置背景还会造成渲染缓慢的问题）；
否则，在IE9及以上版本IE浏览器，和非IE浏览器下，以“界面基础图片目录”（路径见后台风格管理中当前风格的设置）下的bg.jpg为背景，且自动缩放为全屏、不滚动；在IE9以下浏览器中以bg_basic.jpg图片为背景，自动重复、不滚动。
建议bg.jpg使用大尺寸图片（分辨率1600*1000即可），而bg_basic.jpg则使用可拼接的传统背景图。
© 懒人资源 | cityed.cn ( [3 C1 m7 B* D6 ~( V) r0 V, m
© 懒人资源 | cityed.cn 9 a7 E2 b. f, H- c" Y4 d, D
© CITYED.CN 版权所有 0 t  V4 }2 O9 i* @4 s$ w

实现方法三

以下是另一种方法（DZ勿用），但需注意的是，如果您的页面上存在浮动框，请勿使用此方法。
此方法将造成浮动框无法跟随屏幕滚动而滚动。
% q) Y* @" x' P: u- h
© 整站源码 cityed.cn 9 A) b) _* U5 G. v  c0 c5 f1、由于本方法在IE6/7下存在问题，因此我们在IE6/7浏览器下保留原后台背景设置。
© 整站源码 cityed.cn * {# ^) F) _1 z" I打开当前模板路径下 common/common.css 样式文件，查找：
# i$ g! h4 r% e& V

1. body { {BGCODE}; }

复制代码

© https://cityed.cn 5 \9 T& y9 O: ~# C" {" O替换为：

1. body { *{BGCODE}; background-color: {BGCOLOR}; }

复制代码

说明：IE6/7浏览器下，执行后台风格中的背景设置（颜色/背景图片）。其它浏览器中仅输入其中的背景颜色。

2、在当前模板路径下 common/extend_common.css 样式文件（如果没有请新建）中加入以下代码：
© https://www.cityed.cn 6 p' z2 z' e, u& \( [/ |4 d

1. html {height:100%; overflow:hidden; *overflow:visible; *overflow-y:scroll;}
   
2. body {height:100%; overflow-y:scroll; *overflow-y:visible; min-height:100%; zoom:1;}
   © www.cityed.cn * Z. x/ O5 m) h" S
3. #bgimage {position:absolute; top:0; left:0; height:100%; width:100%; z-index: -10; background-image:url("{IMGDIR}/bg.jpg"); background-position:center top; background-repeat:no-repeat; background-attachment:fixed; -webkit-background-size:cover;/*Webkit:Chrome/Safari*/ -moz-background-size:cover; -o-background-size:cover;/*Opera*/ background-size:cover; zoom:1;}
   © 懒人资源 | cityed.cn 4 C1 e! b3 I& S+ g. y; L2 l9 T
4. #bgimage_ie8 {position:absolute; top:0; left:0; height:100%; width:100%; z-index: -10; -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{IMGDIR}/bg.jpg',sizingMethod='scale')";}

复制代码

说明：
第1行将整个HTML页面的高度定义为全屏（100%），超出部分隐藏。但在IE6/7下按默认方式显示。
第2行将body的高度定义为100%，显示垂直滚动条。但在IE6/7中按默认方式显示。
© https://cityed.cn 3 L) v! w1 a- G$ B! j: k4 Z第3行是IE9及以上版本的IE浏览器和非IE浏览器下，背景图片及其缩放代码。
© 懒人资源 | cityed.cn 6 M8 O4 m4 [: h8 ~. Y第4行是IE8浏览器下，背景图片及其缩放代码。

请将背景文件 bg.jpg 上传到风格设置的 界面基础图片目录 。
© 懒人资源 | cityed.cn 8 Z* ?1 Z" \& r8 L; J: n
8 t4 B* `+ C( J% J% a3、在当前模板路径下 common/header 样式文件中查找：
© www.cityed.cn $ K) a9 h6 m. h. J( O% z, b% C

1. <div id="append_parent"></div><div id="ajaxwaitid"></div>

复制代码

在其前面加入：
© 懒人资源 | cityed.cn 2 O- [$ Z5 q4 Z2 R2 V, N

1. <!--[if (gte IE 9)|(!IE)]><!--><div id="bgimage"></div><![endif]--><!--[if IE 8]><div id="bgimage_ie8"></div><![endif]-->

复制代码

' X/ l% r0 V# @& N3 [4 ^  D说明：IE9及以上版本的IE浏览器和非IE浏览器下，采用第二步中添加的 bgimage 样式；在IE8下采用 bgimage_ie8 样式。
© cityed.cn   ^2 s: S0 N6 S5 t) H
上传覆盖，更新数据缓存和模板缓存。