免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
Board logo

標題: [教學] 为浮动窗口加入自适应背景 [打印本頁]

作者: 无界    時間: 2016-5-31 21:06     標題: 为浮动窗口加入自适应背景

效果如图:
1.png
2.png
3.png
4.png
5.png

修改方法:
在css_common模版加入下边代码
  1. .m_c {
  2.     background: url(http://tlb.258club.com/attachments/month_1511/1511180759c125c7746de4c3ef.gif) no-repeat;
  3.     background-color: #FFFFFF;
  4.     background-size: 100%;
  5. }
複製代碼
http://tlb.258club.com/attachments/month_1511/1511180759c125c7746de4c3ef.gif换为自己的图片即可

圖片附件: 1.png (2016-5-31 21:04, 48.44 KB) / 下載次數 2980
http://utmall.com/discuz/attachment.php?aid=75470&k=4a958c5a299468536aefac31158a3221&t=1732360517&sid=1bAqq8



圖片附件: 2.png (2016-5-31 21:04, 148.67 KB) / 下載次數 3006
http://utmall.com/discuz/attachment.php?aid=75471&k=fcfbe700bb970d4a602186fca591cd86&t=1732360517&sid=1bAqq8



圖片附件: 3.png (2016-5-31 21:04, 97.53 KB) / 下載次數 2937
http://utmall.com/discuz/attachment.php?aid=75472&k=c726dd1424baded120bdaee24f4a108b&t=1732360517&sid=1bAqq8



圖片附件: 4.png (2016-5-31 21:04, 35.45 KB) / 下載次數 2962
http://utmall.com/discuz/attachment.php?aid=75473&k=083189889b718c48e4aa1d196dd03a0e&t=1732360517&sid=1bAqq8



圖片附件: 5.png (2016-5-31 21:04, 49.88 KB) / 下載次數 3015
http://utmall.com/discuz/attachment.php?aid=75474&k=cd1569775b00cf53120937426e3c2023&t=1732360517&sid=1bAqq8


作者: 繽紛色彩    時間: 2016-5-31 22:55

這個好玩
又多個好玩的玩兒了
作者: 4rphotoclub    時間: 2016-6-1 03:37

这个看似很实用,收下来用用先!
作者: empty    時間: 2016-6-1 17:44

我放进论坛不起作用
作者: 无界    時間: 2016-6-1 18:00

本帖最後由 无界 於 2016-6-1 18:02 編輯

回復 4# empty


    那就把代码改为
  1. .m_c {
  2.     background: url(http://tlb.258club.com/attachments/month_1511/1511180759c125c7746de4c3ef.gif) no-repeat!important;
  3.     background-color: #FFFFFF!important;
  4.     background-size: 100%!important;
  5. }
複製代碼
加入!important更改默认的CSS样式优先级规则
作者: kkzyy    時間: 2016-6-2 01:54

比较期待自适应模板
比如手机
作者: 无界    時間: 2016-6-2 06:45

回復 6# kkzyy


    可以尝试响应式布局
比如
@media screen and (max-width:650px) {
#menu {display: none!important}
}
放在css_append模板,效果即是当屏幕最大分辨率小于650px时隐藏menu元素。
如果楼主css很强大完全可以仿制手机模板。
作者: kkzyy    時間: 2016-6-3 00:04

之前有试过
只是技术太差
字体方面和浮动窗口不会改
作者: 网雨霏霏    時間: 2016-6-25 09:46

动图很烦人 建议用静止图片

由于我常驻楼主的论坛,为了不影响我访问的心情,我将楼主论坛内的动态特效都用浏览器的广告屏蔽功能给屏蔽了:
傲游截图20160625094943.jpg

圖片附件: 傲游截图20160625094943.jpg (2016-6-25 09:46, 215.24 KB) / 下載次數 3014
http://utmall.com/discuz/attachment.php?aid=75686&k=70fb2de5e90be5992aceb75da7497e43&t=1732360517&sid=1bAqq8


作者: Shiau0313    時間: 2016-8-9 17:43

好酷哦謝謝分享
作者: 狂三    時間: 2016-11-19 14:29

那在浮動窗口左邊加上圖片要怎麼用?
asd.png 這樣
要怎改???????

圖片附件: asd.png (2016-11-19 14:29, 90.56 KB) / 下載次數 2159
http://utmall.com/discuz/attachment.php?aid=76519&k=f6c71130f1e73ae7cb479aac230f51f2&t=1732360517&sid=1bAqq8


作者: 无界    時間: 2016-11-21 14:26

回復 11# 狂三


    地址发来我看下




歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://utmall.com/discuz/) Powered by Discuz! 7.2