查了一大堆資料,折騰了一個下午的Background插件,結果發現最后還是Background-cover適合我,稍微了解了下這個插件的安裝和卸載以及治好強迫症
首先是安裝:
兩個版本按理說是一樣的,Install之后重啟進Extension,點插件的小齒輪,選Extension Setting
找到自定義選項,然后就要修改settings.json了
比如我的是這樣的(因為裝了background-cover,因此實際的background插件是從第13行開始的)
代碼如下:(D:/UpupooResource/bg.png改成你的圖片路徑就可以了)[0]
1 "background.enabled": true, 2 "background.useDefault": false, 3 "background.customImages": [ 4 "file:///D:/UpupooResource/bg.png"
5 ], 6 "background.style": { 7 "content": "''", 8 "pointer-events": "none", 9 "position": "absolute", 10 "z-index": "99999", 11 "width": "100%", 12 "height": "100%", 13 "background-position": "center", 14 "background-repeat": "no-repeat", 15 "background-size": "20%,20%", 16 "opacity": 0.1
17 }
如果要插入多個圖片並且單獨設置每個圖片的顯示樣式請參考大佬的寫法[1](圖片最多能有三張不一樣的):https://blog.csdn.net/yukinoai/article/details/84564949
如果在VS Code里settings.json報錯大體這幾個原因:(雖然大部分情況不影響實際運行)
1.background.style只有" { " 沒有 " } "——找到對應末尾補上
2.默認的workbench.icontheme不存在——找到該行屬性改成VS Code默認的"vs-seti"
3.新插入圖片后數組不正確——上一張圖片的路徑末尾沒有" , ",補上
理論上只要設置正確了,重啟編輯器就可以看到編輯區有背景圖片了
但是這類插件還有一個問題——因為要有背景圖片就要修改workbench.desktop.main.css文件,因此修改后會在VS Code中彈出警告,並且窗口標題會有"Unsupported"[中文版顯示的是"不受支持"]
解決起來倒是很簡單......直接在Extension里搜索fix VSCode checksum
安裝以后按下Ctrl+Shift+P打開命令窗口,找到fix checksums:apply命令並運行就可以了,提示成功后重啟VS Code,就沒有煩人的不受支持和彈窗警告了:
關於可以多個圖片:
圖片最多可以放三個,但是這個多圖片並不是說新打開一個文件編輯區的背景圖就會換,而是像作者在示例中的那樣,只有分割工作區才會生效
如果只是要換編輯區的背景圖,也可以只選一張圖片然后將background-size屬性改成100%,100%,這樣圖片會覆蓋掉整個編輯區,總之可以按照自己喜好調整圖片在編輯區中出現的位置和大小,如果不是壁紙大小的圖片最好還是透明背景的好[2]
關於卸載:
這類插件卸載多多少少會有些問題,比如卸載之后插件沒了但是背景圖片還在的情況
1.首先先在settings.json中填寫background.enabled”: false然后重啟VS Code,卸載插件
2.刪除掉settings.json中background的其他代碼,這些不需要的代碼就不要留着了
3.如果發現背景圖重啟后還在,打開VS Code程序所在目錄,打開resource/app/out/vs/workbench下的workbench.desktop.main.css文件,用VS Code或者記事本打開它,找到/css-background-start,在稍微往后一點找到/css-background-end,從/css-background-start/刪到/css-background-end/就行了[3],然后重啟VS Code即可
現在其實已經在用Background-cover了,但是今天不想寫了下次寫
參考資料來源:
[0]:vscode設置背景圖片 https://www.cnblogs.com/chinabin1993/p/7151361.html
[1]、[2]:VSCode——修改VSCode背景圖片 https://blog.csdn.net/yukinoai/article/details/84564949
[3]:vscode-background插件“卸載“以及“禁用“失效 https://blog.csdn.net/qq_44275213/article/details/108126472