免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
申请论坛问题反馈
帖子
发帖
查看: 4841|回复: 14
上一主题 下一主题 打印

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

电梯直达 楼主
麻城生活网发表于 2018-9-9 15:10 | 只看该作者 倒序看帖 阅读模式

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

附件：您需要 登录 才可以下载或查看，没有帐号？立即注册

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

18090812491ae2e5e05c9f70c9.jpg

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

最近看过此主题的会员

你好世界
访问时间: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

麻城生活网

沙发
楼主 | 麻城生活网发表于 2018-9-9 15:47 | 只看该作者
我用了两组代码来实现的，各位站长能不能电脑端帮我测试一下宽屏的效果，我这边笔记本
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

板凳
楼主 | 麻城生活网发表于 2018-9-9 15:54 | 只看该作者
360测试其他风格背景有一点点瑕疵，用火狐就不行了，谁有ie浏览器帮我测试一下！！！
点评
B Color Link Smilies

您还可以输入:个字符
X

 X

麻城生活网

TOP

地板
icode(无界)发表于 2018-9-9 16:03 | 只看该作者
加上
  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

楼梯
楼主 | 麻城生活网发表于 2018-9-9 16:10 | 只看该作者
回复 4# icode


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

您还可以输入:个字符
X

 X

麻城生活网

TOP

地下室
楼主 | 麻城生活网发表于 2018-9-9 16:17 | 只看该作者
回复 4# icode


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

点评

icode   

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

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

麻城生活网

TOP

下水道
icode(无界)发表于 2018-9-9 16:26 | 只看该作者
回复 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

暗河
楼主 | 麻城生活网发表于 2018-9-9 16:26 | 只看该作者
回复 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

沙滩
icode(无界)发表于 2018-9-9 16:27 | 只看该作者
还有，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

大海
楼主 | 麻城生活网发表于 2018-9-9 16:29 | 只看该作者
回复 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

11楼
楼主 | 麻城生活网发表于 2018-9-9 16:30 | 只看该作者
回复 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

12楼
icode(无界)发表于 2018-9-9 16:37 | 只看该作者
默认背景的写法错了要改成
  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

13楼
楼主 | 麻城生活网发表于 2018-9-9 16:40 | 只看该作者
回复 12# icode


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

您还可以输入:个字符
X

 X

麻城生活网

TOP

14楼
楼主 | 麻城生活网发表于 2018-9-9 16:42 | 只看该作者
回复 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

15楼
楼主 | 麻城生活网发表于 2018-9-9 21:07 | 只看该作者
回复 14# 麻城生活网


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

您还可以输入:个字符
X

 X

麻城生活网

TOP

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

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