VsCode背景圖片設置

雜記

在網上找資料的時候，無意間翻到一個博友vscode的背景圖片設置博客，碰巧最近又有看《一人之下》，然后就一發不可收拾了……

圖片處理

我找的背景圖片最好的效果是將背景設置為透明，於是自己現下載了PhotoShop，又從網上找博客學習了一下背景透明設置的方法，經過一天的禿頭之旅算是達到了令自己滿意的效果。有路過的PS大神看過笑笑就好（￣︶￣）↗　

我是學習了這篇博客的，大家也可以移步學習一下：咻~~

• 選用磁性套索工具，將圖片中的想要設置的圖形選出來（圖片當然不是自己選的背景啦，圖省事找了一個簡單的圖片來寫博客的）

   

• 選出來之后按Ctrl+i反選住自己想要的圖形，然后Ctrl+j，可依發現PhotoShop這里多了一個圖層
  
  藍色是新生成的，紅色是原來就有的，然后點擊紅色圖層左邊對應的眼睛圖標，這樣我們就發現背景已經變成了透明的了，如下
  

  好吧，顏色有點嚇人，再按一下Ctrl+i，就變回來了（只學了30min不到的小白，也不知道這個什么原理，純粹自己瞎試出來的）。

  

•  當然后續也可以進行一下令圖片看起來更好的處理

  • 選擇魔術橡皮擦工具，然后按住Alt+鼠標滑輪，放大圖片，用這個橡皮擦可以擦除圖形邊緣特別突出的鋸齒。
    

  • 然后使用這個魔棒工具，選中自己想要的圖形，點擊鼠標右鍵，選擇羽化，選擇合適的羽化半徑，這樣就可以使得圖形邊緣看起來更平滑。
    

• 最終的處理效果
  

VS Code相關配置

在設置背景圖片的時候，前后用過兩個插件，可能是太菜了，都沒有弄成自己滿意的效果，於是就換了另一種直接修改文件的法子，如果想要使用插件完成背景圖片設置的博友，需要另外查找資料了。下邊的方法是學自這位朋友的博客，大家也可以移步看一下哈（里邊有這位朋友的效果圖，我自己的就不放了（￣︶￣）↗　）：咻~~

找到VsCode安裝路徑下的這個文件：F:\ProgramFiles\VSCode\resources\app\out\vs\workbench\workbench.desktop.main.css

然后在該文件的末尾添加下邊的代碼：（CSS這里根據自己的喜好修改、添加就好了）

我的圖片路徑是：F:/ProgramFiles/background/fbb.png

方案一：

 

 /*最終的效果的圖片自適應窗口的大小，適用於長寬比例與vscode窗口相似的圖片*/
 body {
    background-image: url('file:///E:/ProgramFiles/background/fbb2.png');/*在這里添加圖片路徑*/
    background-size: 100% 100%;
    background-position:98% 98%;
    opacity: 0.75;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

 

 

方案二：

/*效果圖片位於窗口的右側，具體位置可以通過調整background-position來實現*/
 body {
    background-image: url('file:///F:/ProgramFiles/background/fbb.png');/*在這里添加圖片路徑*/
    background-size: 40% 100%;
    background-position:98% 98%;
    opacity: 0.75;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}

然后保存、重啟VsCode就可以了，一個不好的缺點就是每次VS Code更新之后都要重新設置一下。