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

[mkwwmka5]

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

 

[Code2Wolf]

注意：大規模的模糊化是個很耗運算資源的，非常不建議這樣做，你可以自己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後面一行加上自定義標籤

<div class="bg"></div>

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

以下區別在圖片放置的路徑寫法url

.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;
}

.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的延伸用法，方便也好管理

成品結果，每一頁都會套用到


PS.其實這是CSS的知識，比較不屬於Xenforo。

 

[diguo520]

这个背景有点吓人啊

 

[Code2Wolf]

嚇人? 是可怕? 還是指很棒? 雖然這背景在某些情況下是很美的，它是 Scotland Map Network
是現代網路的象徵性圖片，你可以搜尋 Scotland Map Network Black And White 會找到很多類似的 Vector 向量圖