ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

VsCode背景图片设置

2020-05-16 21:56:21  阅读:366  来源: 互联网

标签:repeat 设置 VsCode ProgramFiles background 背景图片 图片


杂记

在网上找资料的时候,无意间翻到一个博友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

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

我的图片路径是: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更新之后都要重新设置一下。

 

标签:repeat,设置,VsCode,ProgramFiles,background,背景图片,图片
来源: https://www.cnblogs.com/sykline/p/12902339.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有