LV. 29
GP 4k

【攻略】替換巴哈姆特背景圖片的教學

樓主 深海異音 hbl917070
331 -

3年前我開發了巴哈深色主題,不過那時候安裝非常麻煩,所以我改良了安裝方式
現在只需要在瀏覽器安裝個js腳本,就可以使用「可替換背景圖片的巴哈深色主題」

安裝腳本的網址
https://forum.gamer.com.tw/C.php?bsn=60076&snA=2621599


如果是之前已經安裝過我那個深色主題的人
而且有一股神秘的力量讓你不論無何都不想點上面的網址
請直接把舊的「stylish樣式」跟「反轉文字顏色的js」都刪除
因為舊版的stylish深色主題將不再維護
下面這3個js腳本安裝完後就會有深色主題,不需要stylish,也不需要貼反轉文字顏色的程式碼



安裝完深色主題的js腳本後,即可開始下面的教學




這篇是要教 替換背景圖片的技巧,使用後像這樣











編輯腳本


1、在瀏覽器的右上角找到「Tampermonkey」的圖示,對他「左鍵」點一下



2、展開選單後,對要編輯的腳本點「右鍵」( 注意要點在文字上面



3、之後就會跳出那個腳本的程式碼可以進行編輯



4、稍微往下捲,會看到我有註明哪裡是可以修改的變數,分別是「背景圖片網址」跟「背景圖片上面的漸層顏色」



5、編輯完畢後按「Ctrl + S」存檔,或是滑鼠到上面按「檔案→儲存」








實際操作


這兩有兩個比較專業的名詞需要先解釋一下,RGBA跟base64

RGBA:一種表示顏色的語法,RGB不用說當然就是代表紅綠藍3種顏色,最後的A指的是透明度

base64:把圖片直接轉換成一串很長的文字,把這串很長的文字貼到瀏覽器的網址列,就會還原回原本的圖片



替換背景圖片

可以把圖片上傳到「imgur」或直接把圖片上傳到「巴哈姆特的圖片空間」
之後替換「背景圖片網址」後面「雙引號裡」的網址即可



把圖片上傳到巴哈這種小事應該大家都會,所以我這邊示範:
把圖片轉成base64直接貼上來,可以使用「DataURL.net」直接線上轉換,或是有下載「AeroPic」的人,可以直接把圖片變成base64的文字



base64的文字很長,所以超過500k的圖片就不建議轉成base64



修改完後儲存腳本,到回到巴哈姆特 重新整理,就會看到背景已經替換





調整背景顏色


為了避免文字看不清楚,所以深色主題會在背景圖片前面疊一個半透明的顏色來淡化背景圖片,而且這個顏色是一個漸層

可以修改的參數有3個,分別是「漸層方向(角度)」、「漸層起始顏色」、「漸層結尾顏色」


漸層方向(角度):不用說,當然是0~360,0deg=由下而上、90deg=由左而右、45deg=左下到右上
rgba:裡面有4個數字,分別是「紅(0~255), 綠(0~255), 藍(0~255), 透明度(0~1)」,舉例:
rgba(255, 255, 255, 1) = 白色
rgba(0, 0, 0, 1) = 黑色
rgba(255, 0, 0, 1) = 紅色
rgba(0, 0, 0, 0.3) = 30%透明的黑色
rgba(0, 120, 120, 0.5) = 50%透明的藍綠色
rgba(0,0,0,0) = 完全透明


例如我不想要背景圖看起來暗暗的,也不想要漸層,可以把兩個rgba的顏色都修改成只有30%透明度的黑色
var 背景圖片上面的漸層顏色 =
"linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)";





或是喜歡純色的人,可以不設定背景圖片,然後把漸層的兩個顏色都設定成rgba(45,45,45,1)
var 背景圖片網址 = "";

var 背景圖片上面的漸層顏色 =
"linear-gradient(90deg, rgba(45, 45, 45, 1) 0%, rgba(45, 45, 45, 1) 100%)";





如果不小心改壞了,這邊有原本的預設值

var 背景圖片網址 = "https://i.imgur.com/zF17VkP.jpg";

var 背景圖片上面的漸層顏色 =
"linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.2) 100%)";

331
-
未登入的勇者,要加入討論嗎?
板務人員:

7517 筆精華,07/19 更新
一個月內新增 20
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】