免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
帖子
发帖
查看: 3731|回复: 14
上一主题 下一主题 打印

[已解决] 求助如何实现背景图贴在自己的论坛纵横平铺   [复制链接]

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

附件:您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 麻城生活网 于 2018-9-9 16:43 编辑

18090812491ae2e5e05c9f70c9.jpg
2018-9-9 15:06


如何把上图背景直接用在自己的论坛背景上纵横平铺,头部代码不行,会覆盖免刷新切换论坛背景导致失效。

最近看过此主题的会员

你好世界
访问时间:2022-11-05 19:43
梅子
访问时间:2021-09-17 22:42
Yenifer
访问时间:2018-10-29 14:42
零九三零
访问时间:2018-09-16 00:04
芙蓉姐姐
访问时间:2018-09-12 23:20
icode
访问时间:2018-09-10 21:43

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

我用了两组代码来实现的,各位站长能不能电脑端帮我测试一下宽屏的效果,我这边笔记本
css_append
  1. html,body {background: url("http://mc0713.66rt.com/attachments/day_180908/18090812491ae2e5e05c9f70c9.jpg") repeat-x 0 0;text-align: center;}
复制
其他头部
  1. <style>body,html{background-attachment:fixed!important;}</style>
复制
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

360测试其他风格背景有一点点瑕疵,用火狐就不行了,谁有ie浏览器帮我测试一下!!!
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

加上
  1. background-size:cover
复制
就可以了

比如
  1. .red {
  2.     background: #FCFAF0 url(http://icode.258club.com/attachments/month_1809/1809091….jpg) no-repeat 50% 0;
  3.     background-size: cover;
  4. }
复制
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 4# icode


    我去试试!!!感谢哈
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 4# icode


    这个代码加到各个颜色背景里不行了,背景直接乱了

点评

icode   

你怎么加的?    发表于 2018-9-9 16:18 

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 6# 麻城生活网


    你的common模版里不是有风格切换的css么?
  1. .default{background: #96C9FE url(http://mc0713.66rt.com/attachments/day_180908/18090812491ae2e5e05c9f70c9.jpg) repeat-x 20 0;}
  2. .red{background: #FCFAF0  url(http://mc0713.66rt.com/attachments/day_180907/18090717025e9e049a0ad8b500.jpg) no-repeat 50% 0;}
  3. .orange{background: #FCFAF0 url(http://mc0713.66rt.com/attachments/day_180907/1809071702fe7bd1b1850b49fc.jpg) no-repeat 50% 0;}
  4. .blue{background: #FFFFFF url(http://mc0713.66rt.com/attachments/day_180907/1809071701f2e2a134107b9eac.jpg) no-repeat 50% 0 fixed;text-align: center;}
  5. .green{background: #FFF url(http://mc0713.66rt.com/attachments/day_180907/1809071701e445e03aea373f3f.jpg) no-repeat 50% 0;}
  6. .purple{background: #FFF url(http://mc0713.66rt.com/attachments/day_180907/1809071701be6e117566216898.jpg) no-repeat 50% 24px;}
复制
你把默认风格那个改成
  1. .default{background: #96C9FE url(http://mc0713.66rt.com/attachments/day_180908/18090812491ae2e5e05c9f70c9.jpg) no-repeat 50% 0; background-size: cover;}
复制
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 4# icode
  1. /* ~~~~~~~~~~~~~~~~~~~~ 风格切换~~~~~~~~~~~~~~~~~~~~ */
  2. #set_style_menu{padding: 6px 10px 10px;}
  3. .sslct_btn i {float: left;display: inline;margin: 1px;width: 10px;height: 10px;background: #2E80D1;overflow: hidden;font-style: normal;}
  4. #set_style_menu li {float: left;margin: 4px 4px 0 0;width: 12px;height: 12px;border: 1px solid #CDCDCD;cursor: pointer;list-style: none;}
  5. #set_style_menu li i {float: left;display: inline;margin: 1px;width: 10px;height: 10px;background: #2E80D1;overflow: hidden;font-style: normal;}
  6. .default{background: #96C9FE url(http://mc0713.66rt.com/attachments/day_180908/18090812491ae2e5e05c9f70c9.jpg) repeat-x 20 0;}
  7. .red{background: #FCFAF0  url(http://mc0713.66rt.com/attachments/day_180907/18090717025e9e049a0ad8b500.jpg) no-repeat 50% 0;
  8. background-size: cover;
  9. }
  10. .orange{background: #FCFAF0 url(http://mc0713.66rt.com/attachments/day_180907/1809071702fe7bd1b1850b49fc.jpg) no-repeat 50% 0;
  11. background-size: cover;
  12. }
  13. .blue{background: #FFFFFF url(http://mc0713.66rt.com/attachments/day_180907/1809071701f2e2a134107b9eac.jpg) no-repeat 50% 0 fixed;text-align: center;
  14. background-size: cover;
  15. }
  16. .green{background: #FFF url(http://mc0713.66rt.com/attachments/day_180907/1809071701e445e03aea373f3f.jpg) no-repeat 50% 0;
  17. background-size: cover;
  18. }
  19. .purple{background: #FFF url(http://mc0713.66rt.com/attachments/day_180907/1809071701be6e117566216898.jpg) no-repeat 50% 24px;
  20. background-size: cover;
  21. }
  22. #toptb {
  23.     border-bottom: 1px solid #CDCDCD;
  24.     background: #F2F2F2;
  25.     line-height: 0px;
  26.     margin-top: -5px;
  27.     height: 22px;
  28. }
  29. .zsc a{float: left;padding: 0 4px;height: 28px;color:#333 ;}
复制
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

还有,css_append模版里
  1. html,body {background: url("http://mc0713.66rt.com/attachments/day_180908/18090812491ae2e5e05c9f70c9.jpg") repeat-x 0 0;text-align: center;}
复制
删了吧
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 9# icode


    我想达到的效果是默认风格就用1楼的背景,其他的颜色背景保持不变

点评

麻城生活网   

回复 icode :不对啊,我想换成的背景图没有,怎么显示成之前的默认风格背景了?    发表于 2018-9-9 16:34 

icode   

麻城的特色图片为默认并且平铺,其他不变    发表于 2018-9-9 16:30 

icode   

我明白,告诉你的就是    发表于 2018-9-9 16:30 

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 7# icode


    刚加上去的

点评

icode   

除了默认的 其他的不要加background-size: cover    发表于 2018-9-9 16:36 

icode   

回复 icode :除了默认的 其他的不要加background-size: cover    发表于 2018-9-9 16:35 

icode   

除了默认的 其他的不要加background-size: cover    发表于 2018-9-9 16:34 

icode   

common里边的.default也被你改错了    发表于 2018-9-9 16:32 

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

默认背景的写法错了要改成
  1. .default{background: #96C9FE url(http://mc0713.66rt.com/attachments/day_180908/18090812491ae2e5e05c9f70c9.jpg) no-repeat 50% 0; background-size: cover;}
复制

点评

icode   

no-repeat 50% 0这样才对,而不是no-repeat 20 0    发表于 2018-9-9 16:38 

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 12# icode


    应该好了吧,谢谢无界兄的热心帮助!!!!
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 12# icode


    恩,之前我的默认背景图与主题表格有出入我自己瞎改的,谁知道蒙对了!!!!

点评

麻城生活网   

回复 icode :margin改成15px 0 0 0       这是改什么位置的参数呀    发表于 2018-9-10 09:04 

麻城生活网   

回复 icode :明天看改后的效果,现在手机端看不了,谢谢无界兄贴心指导    发表于 2018-9-9 21:08 

麻城生活网   

回复 icode :改0.9了,按你说的我去改改仿火狼    发表于 2018-9-9 21:02 

icode   

还有个小细节需要调整一下,火狼里边的.tongji_a元素,你把margin改成15px 0 0 0试试    发表于 2018-9-9 17:00 

icode   

透明度0.5?太。。。。    发表于 2018-9-9 16:48 

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

回复 14# 麻城生活网


    精华帖子好像调用的不对,你给看看哪里出问题了?
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

TOP

发帖
B Color Image Link Quote Code Smilies
高级模式 | 发新话题

 
您需要登录后才可以回帖 登录|立即注册 
快速
返回顶部
返回首页