已解决 如何给页面背景设置高斯模糊呢¿

  • 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件、模板主题售前、售后问题请联系QQ:5916171
UID
777
注册
2020/04/21
消息
12
反馈评分
0
黄金
94.0G
    Windows 10 Chrome 85.0.4183.121
  • #1
如何给页面背景设置高斯模糊呢¿
 
解决方案
注意:大規模的模糊化是個很耗運算資源的,非常不建議這樣做,你可以自己PS一張高斯模糊後的圖片添加到背景圖會更好,如果你不希望你的客戶抱怨的話。
重點1:使用CSS,但不支援主標籤(html, body),主標籤只支援顏色RGBA(透明度)或是HSLA(彩度),

rgba(100, 222, 234, .3);
hsla(0, 0%, 100%, .3);
所以必須自訂 div 標籤或 HTML5 標籤,然後使用 filter: blur,需要為不同瀏覽器寫 filter。

重點2:必須使用絕對定位,使用絕對定位後,子元素也要使用絕對定位,必須使用z-index做層級,確保背景在最下層,但這意味著你的模板全部都需要重新調整了。
★ 解決方法:使用z-index: 0-1 將他至於平面以下。

步驟一:模板列表-> PAGE_CONTAINER->...

Code2Wolf

终身会员
UID
1008
注册
2020/09/17
消息
39
解决方案
5
反馈评分
91
黄金
3,719.8G
    Windows 10 Chrome 86.0.4240.75
  • #2
注意:大規模的模糊化是個很耗運算資源的,非常不建議這樣做,你可以自己PS一張高斯模糊後的圖片添加到背景圖會更好,如果你不希望你的客戶抱怨的話。
重點1:使用CSS,但不支援主標籤(html, body),主標籤只支援顏色RGBA(透明度)或是HSLA(彩度),

rgba(100, 222, 234, .3);
hsla(0, 0%, 100%, .3);
所以必須自訂 div 標籤或 HTML5 標籤,然後使用 filter: blur,需要為不同瀏覽器寫 filter。

重點2:必須使用絕對定位,使用絕對定位後,子元素也要使用絕對定位,必須使用z-index做層級,確保背景在最下層,但這意味著你的模板全部都需要重新調整了。
★ 解決方法:使用z-index: 0-1 將他至於平面以下。

步驟一:模板列表-> PAGE_CONTAINER-> (選擇主題樣式的父層,透過搜尋關鍵字找<body)
並且在body後面一行加上自定義標籤
HTML:
<div class="bg"></div>
2020-10-17_054839.jpg

步驟二:回到模板列表->找到主題所對應的less檔(我的例子是uix.less)->添加CSS在任意處
2020-10-17_062627.jpg

以下區別在圖片放置的路徑寫法url
寫在內部的uix.less:
.bg{
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(/xf/data/bg.jpg);  /* url(/根目錄/第一層資料夾/檔案) */
    background-attachment: fixed;
    background-size: cover;
    z-index: -1;
}
寫在外部檔案class:
.bg {
    width: 100%;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    position: absolute;
    left: 0;
    top: 0;
    background-image: url(../data/bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    z-index: -1;
}

我上一篇教學文有教過外部css的延伸用法,方便也好管理

成品結果,每一頁都會套用到
2020-10-17_063025.jpg2020-10-17_063056.jpg


PS.其實這是CSS的知識,比較不屬於Xenforo。
 
最后编辑:
解决方案

Code2Wolf

终身会员
UID
1008
注册
2020/09/17
消息
39
解决方案
5
反馈评分
91
黄金
3,719.8G
    Windows 10 Chrome 86.0.4240.75
  • #4
嚇人? 是可怕? 還是指很棒? 雖然這背景在某些情況下是很美的,它是 Scotland Map Network
是現代網路的象徵性圖片,你可以搜尋 Scotland Map Network Black And White 會找到很多類似的 Vector 向量圖

2020-10-22_163504.jpg