找回密码
 立即注册
查看: 1673|回复: 0

DISCUZ论坛添加页头及页尾背景图片的几种方法(原创教程)

[复制链接]
等级头衔

等級:管理员

积分成就
威望
960
贡献
800
主题
99
精华
0
金钱
539
积分
3367
注册时间
2012-8-22
最后登录
2021-8-29

爱美娜网络 发表于 2012-12-30 15:37:28 | 显示全部楼层 |阅读模式
先给大家分享页头添加背景图片的两种方法:

1. 第一种效果,是给discuz的整体框架添加背景图片,见图示:
102311zdmt48dr8pw6cdpb.jpg.thumb.jpg

添加方法如下:找到你现在使用模板common文件下的header.html文件,在部分添加以下代码:
  1. <style>body { background-image:url(你的背景图片地址,如http://abc.com/imgs/bg.jpg); background-repeat:no-repeat; background-position: top center; padding-top:40px;}</style>
复制代码
这种方法适用于非宽屏的风格,且背景图片多为宽像素的某张图片。添加此代码后,可能需要调整位置,修改padding-top后面的像素即可。


2. 第二种效果,是给discuz论坛导航栏上方的logo位置区域添加背景图片,见图示:


1023126ej2eev7jd3vdegu.jpg.thumb.jpg

添加方法也超简单,找到header.htm中关于top部分的代码,找到banner所在的div层,默认应该是id=hd,在之后加入以下代码,最终代码展示为:
  1. <div id="hd" style="background-image: url(static/image/xxx.jpg); background-repeat:no-repeat; background-position:center; background-position:top">
复制代码
注意添加的图片高度要始终哦,而且不要和logo有冲突,这里也侧面证明了logo做成透明PNG格式的必要性。
三、添加页尾即页面底部背景图片的方法
OK,大同小异,为添加页尾添加背景图片的方法,是找到footer.htm模板文件,在代码中footer_banner代码下方即“ ”添加以下代码:
  1. <div style="background-image: url(http://你的背景地址.jpg); background-repeat:no-repeat; background-position:center; background-position:top>
复制代码
做的图片效果越清淡效果会越好

好心人 http://haox.ren
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

下载手机安卓版|手机版|劉家. ( 京ICP备05079106号 )

GMT+8, 2024-5-17 14:21 , Processed in 0.338735 second(s), 35 queries . Template by CnRen.Vip

版权: 劉家(CnLiuJia) 信息:来源于网络

Copyright © 2000-2024 CnLiuJia.Com Inc.All Rights Reserved

快速回复 返回顶部 返回列表