DZ实现全屏背景自动缩放功能 / Discuz教程 [复制链接]

1663 1
实现方法一

© CITYED.CN 版权所有 ; ?3 y& ^( g$ Z, _8 L5 ~9 x7 `1、打开当前模板路径下 common/common.css 样式文件,删除以下代码(去掉原有的背景代码,使后台背景设置失效):0 C/ d) s  o% ^' K7 y
  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在其下方增加:; I$ q& l  ?& c$ [& L' J+ A2 p4 z © cityed.cn
  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}-->
复制代码
) k. G# k( _6 o' j © https://www.cityed.cn
代码解释:+ r, ~6 u3 {3 p, T! b$ v © 整站源码 cityed.cn
当手机或iPad访问电脑版时,背景设置为纯白色(因为手机和iPad上会自动全屏网页,无必要设置背景,设置背景还会造成渲染缓慢的问题);; C$ t) Q3 }# P' u' W& }0 G0 r © 懒人资源 | cityed.cn
否则,在IE9及以上版本IE浏览器,和非IE浏览器下,以“界面基础图片目录”(路径见后台风格管理中当前风格的设置)下的bg.jpg为背景,且自动缩放为全屏、不滚动;在IE9以下浏览器中以bg_basic.jpg图片为背景,自动重复、不滚动。3 G- h" m2 L: z6 Q © https://cityed.cn
建议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

懒人资源 | 常见问题解答

关于解压密码错误?
本站资源大多存放于各大网盘,一般不会设置加密。如需解压密码的,一般均会在附件中有专门的说明。若发现解压密码错误,请联系客服进行处理!
关于链接地址失效?
请您及时复制资源链接地址联系我们的客服,客服看到后将第一时间更新链接地址并告知您重新下载,若无法更新的,将安排给您退还相关积分,请谅解!
关于售后及支持?
由于代码的运行具有不可预见性,本站不保证代码完整可运行,不提供相关的技术支持和售后服务,另行注明的除外。如果确需技术支持的,请联系客服确定服务价格!
关于搭建技术服务?
由于搭建服务比较费时费力,所以本站除另行说明的其他均不提供搭建服务。本站分享代码纯属兴趣爱好,不以盈利为目的,请勿咨询有没有搭建服务,谢谢理解。
关于资源积分消费?
本站所有资源积分均为本站收集资源的辛苦费,不代表资源本身的价值,软件是高智慧高价值的商品,不可能是白菜价。本站资源售价只是赞助,收取积分仅用于维持本站的日常运营及维护!
关于侵权免责声明?
本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有,如有侵权,请尽快联系客服,核实后我们会立即删除、维护您的权益。非常感谢您的理解。
关于学习安全提示?
提高安全防范意识,共创和谐平安懒人;懒人倡导分享原生资源,资源使用前务必进行病毒查杀及代码安全检查;请勿点击访问源码中的不明链接或扫码不明二维码,以免给您的身心及财产造成损失;以上均属您的个人行为,与懒人资源无关,在此我们深表歉意!!
关于禁止商业提示?
本站所发布的一切资源仅限用于学习和研究目的;不得将资源及内容用于商业或者非法用途,否则,一切后果自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,还请支持正版软件。

1 条评论

 楼主| 我爱我家  中级会员  发表于 | 显示全部楼层
实现方法三
以下是另一种方法(DZ勿用),但需注意的是,如果您的页面上存在浮动框,请勿使用此方法。0 h( |8 l3 a- U5 {. R' c7 Z" Z © 懒人资源 | CITYED.CN
此方法将造成浮动框无法跟随屏幕滚动而滚动。
% 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替换为:6 z# B# t( i: B( V7 J0 |- F+ l) } © 整站源码 cityed.cn
  1. body { *{BGCODE}; background-color: {BGCOLOR}; }
复制代码
% z, H% A' z0 q © 懒人资源
说明:IE6/7浏览器下,执行后台风格中的背景设置(颜色/背景图片)。其它浏览器中仅输入其中的背景颜色。6 Q9 D/ Y/ J$ g1 p © 整站源码 cityed.cn
$ z( B4 j. r, N3 F6 y © www.cityed.cn
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;}" F: I+ Z8 U6 o; A- q$ U* {* s3 l © https://cityed.cn
  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')";}
复制代码
9 m, ^* B. E* Q; ? © www.cityed.cn
说明:1 E0 D# X1 y- Q5 v9 Q. W3 X* u © CITYED.CN 版权所有
第1行将整个HTML页面的高度定义为全屏(100%),超出部分隐藏。但在IE6/7下按默认方式显示。3 r' P5 a. B1 X7 z2 n © CITYED.CN 版权所有
第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浏览器下,背景图片及其缩放代码。. w4 b+ z# ?% k. S9 D9 j © 懒人资源 | cityed.cn
" A# O- Z. E9 f% y © 整站源码 cityed.cn
请将背景文件 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>
复制代码
$ _. W$ u% \$ E- d/ i © 懒人资源 | CITYED.CN
在其前面加入:
© 懒人资源 | 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; l, l3 Q! k9 H © 懒人资源 | cityed.cn
上传覆盖,更新数据缓存和模板缓存。: z: {) Q/ I# r. i/ S$ @# m! ~ © https://cityed.cn
) K" r  k3 [$ s: @7 @" M © www.cityed.cn
您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

Discuz教程

话题: 110 阅读: 19 W+ 互动: 19 W+

© 2020-2026 懒人资源[CITYED.CN] 版权所有 All Rights Reserved. | 联系我们:QQ 1986 406 203 | 电子邮箱:pub@cityed.cn | 技术支持: 懒人资源[CITYED.CN] , 基于Discuz!
快速回复 返回顶部 返回列表
现在加入我们,拥有懒人资源一站式通行证!马上 中文注册 账号登陆