VsCode背景图片设置

杂记

在网上找资料的时候,无意间翻到一个博友vscode的背景图片设置博客,碰巧最近又有看《一人之下》,然后就一发不可收拾了……

图片处理

我找的背景图片最好的效果是将背景设置为透明,于是自己现下载了PhotoShop,又从网上找博客学习了一下背景透明设置的方法,经过一天的秃头之旅算是达到了令自己满意的效果。有路过的PS大神看过笑笑就好( ̄︶ ̄)↗ 

我是学习了这篇博客的,大家也可以移步学习一下:咻~~

  • 选用磁性套索工具,将图片中的想要设置的图形选出来(图片当然不是自己选的背景啦,图省事找了一个简单的图片来写博客的)

     VsCode背景图片设置

  • 选出来之后按Ctrl+i反选住自己想要的图形,然后Ctrl+j,可依发现PhotoShop这里多了一个图层
    VsCode背景图片设置
    蓝色是新生成的,红色是原来就有的,然后点击红色图层左边对应的眼睛图标,这样我们就发现背景已经变成了透明的了,如下
    VsCode背景图片设置

    好吧,颜色有点吓人,再按一下Ctrl+i,就变回来了(只学了30min不到的小白,也不知道这个什么原理,纯粹自己瞎试出来的)。

    VsCode背景图片设置
  •  当然后续也可以进行一下令图片看起来更好的处理

    • 选择魔术橡皮擦工具,然后按住Alt+鼠标滑轮,放大图片,用这个橡皮擦可以擦除图形边缘特别突出的锯齿。
      VsCode背景图片设置
    • 然后使用这个魔棒工具,选中自己想要的图形,点击鼠标右键,选择羽化,选择合适的羽化半径,这样就可以使得图形边缘看起来更平滑。
      VsCode背景图片设置

  • 最终的处理效果
    VsCode背景图片设置

VS Code相关配置

在设置背景图片的时候,前后用过两个插件,可能是太菜了,都没有弄成自己满意的效果,于是就换了另一种直接修改文件的法子,如果想要使用插件完成背景图片设置的博友,需要另外查找资料了。下边的方法是学自这位朋友的博客,大家也可以移步看一下哈(里边有这位朋友的效果图,我自己的就不放了( ̄︶ ̄)↗ ):咻~~

找到VsCode安装路径下的这个文件:F:\ProgramFiles\VSCode\resources\app\out\vs\workbench\workbench.desktop.main.css

然后在该文件的末尾添加下边的代码:

我的图片路径是:F:/ProgramFiles/background/fbb.png

方案一:

/*最终的效果的图片自适应窗口的大小,适用于长宽比例与vscode窗口相似的图片*/
 body {
    background-image: url('file:///F:/ProgramFiles/background/fbb.png');/*在这里添加图片路径*/
    opacity: 0.75;
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
    background-size: 100% 100%;
    position: absolute;
}

 

方案二:

/*效果图片位于窗口的右侧,具体位置可以通过调整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更新之后都要重新设置一下。

 

上一篇:Linux安装Redis


下一篇:SharePoint Online 创建门户网站系列之首页布局