欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vscode设置背景图片

程序员文章站 2024-03-18 22:50:52
...

最近发现一个很好玩的vscode插件,对的,没错,不是好用是好玩。整天面对枯燥单调的vscode总会有些审美疲劳,先给大家看下效果:
vscode设置背景图片
是不是感觉没有那么单调了?图片是可以自己选择,我选择的是炮姐,每次码代码累了看下炮姐感觉瞬间电力十足。
下面说下如果实现vscode背景图片:

  1. 首先需要安装图上的background插件

  2. 然后左下角设置,点击设置搜索background
    vscode设置背景图片

  3. 这里需要将 Background:Use Default取消掉,当然如果觉得默认图片不需要换自己喜欢的图片的话不需要取消

  4. 然后 Background:Custom Images选项点击在setting.json中编辑,这里就可以替换自己喜欢的图片展示了
    接下来就是调一下图片的样式,前端开发的小伙伴这里肯定很熟就不多讲了,直接给代码了

  "background.customImages": [
    "D:/0Imgs/6.jpg"
  ],
  "background.style": {
    "content":"''",
        "pointer-events":"none",
        "position":"absolute",//图片位置
        "width":"100%",
        "height":"100%",
        "z-index":"99999",
        "background.repeat":"no-repeat",
        "background-size":"25%,25%",//图片大小
        "opacity":0.2 //透明度
  },
  "background.useDefault": false,
  "background.loop": true,
  "update.enableWindowsBackgroundUpdates": false,
  "background.styles": [
  ]

customImages是我们自己的图片,是一个数组可以配置多个背景图片,示例代码是只一张图片,通过background.style配置图片默认样式,如果多张图片的话可以在styles针对每张图片调整样式

  "background.styles": [
    
  ]