聊聊給vscode編輯器設置圖片背景的方法

本篇文章給大家詳細介紹一下給vscode編輯器設置圖片背景的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。

聊聊給vscode編輯器設置圖片背景的方法

【推薦學習:《vscode》】

先看一個效果展示~

聊聊給vscode編輯器設置圖片背景的方法

聊聊給vscode編輯器設置圖片背景的方法

方法

為了可隨時修改,你可以在你的~/.vscode文件夾下創建一個vscode_style的目錄,
在里邊放入你自己的css文檔和一些圖片。以筆者為例,我的vscode的style是

/**vscode_style.css*/ body{ ???pointer-events:?auto?!important; ???background-size:?100%?!important; ???opacity:?0.90?!important; ???background-position:?0?0?!important; ???/**change?your?image?url?here*/ ???background-image:?url('./bg.png'); ???content:?''; ???position:?absolute;; ???z-index:?999; ???width:?100%; ???background-repeat:?no-repeat; ?}

然后找到vscode程序文件夾,linux上一般在’/opt’目錄下。在{vscode_dir}/resources/app/out/vs/workbench下修改workbench.desktop.main.css就可以修改vscode的樣式啦。

@import?"/home/huaiyu/.vscode/vscode_style/vscode_style.css";

重啟vscode就好了,當你重啟后發現vscode提醒你your code installation appears to be corrupt,直接忽略就它~

  • 另,如果覺得丑丑的title bar不好看,可以在settings.json添加
"window.titleBarStyle":?"custom",

可以自己定制標題欄的樣式。

更多編程相關知識,請訪問:vscode!!

以上就是聊聊給

? 版權聲明
THE END
喜歡就支持一下吧
點贊10 分享