更换vscode背景图片的方法

🐟下面是步骤(●’◡’●)

1. 安装插件

先安装个插件:background

是她是她就是她!就是这个小家伙,上面图片上的那个

2. 添加设置代码

接下来,我们就要在settings.json中加一点代码配置一下插件
settings.json打开方式:

  1. 使用" ctrl+, "快捷键,打开“设置”
  2. 点击“应用程序”**
  3. 划线的即为 settings.json 4. 在settings.json里原本就有的代码里加上以下这一段代码(注:要把下面的代码放进原本代码块的花括号里(●ˇ∀ˇ●))
    // 是否开启背景图显示
    "background.enabled": true,
    // true-显示默认的图片  false-显示用户自定义的图片
    "background.useDefault": false,
    // 自定义显示的图片,(路径要用双引号""括起来!)
    "background.customImages": [
        // 最多设置三张图片,默认显示最上方的图片,当打开多个侧边栏时再依次显示后面的背景图片
        "file:///D:/活动总结/1002.jpg",
        "file:///D:/活动总结/1002.jpg",
        "file:///D:/活动总结/1002.jpg",
    ],
    "background.useFront": false,
    "background.style": {
        "margin": "0 auto",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "z-index": "99999",
        "background.repeat": "no-repeat",
        "background-size": "cover",
        "opacity": 0.3 // 透明度
    }

再加一点哈, “file:///D:/活动总结/1002.jpg” 这个东西是我的图片在电脑里的存储位置,大家用的时候要记得把这个换成自己的图片存储位置

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
VScode背景图片是通过使用扩展程序PNGER for Visual Studio代码来实现的。该扩展允许图像集成和自动删除图像的背景。在设置了图像的名称和位置后,VScode会保存图像并自动更新HTML img标签的source属性。 要在VScode中设置背景图片,可以使用以下代码进行配置: ``` "background.customImages": [ "file:///Users/Desktop/img/background03.png", "file:///Users/Desktop/img/background01.png" ], "background.styles": [ { "content": "''", "pointer-events": "none", "position": "absolute", "bottom": "-60px", "width": "100%", "height": "100%", "z-index": "99999", "background.repeat": "no-repeat", "background-size": "40%,40%", "opacity": 0.3 }, { "content": "''", "pointer-events": "none", "position": "absolute", "width": "100%", "height": "100%", "z-index": "99999", "background.repeat": "no-repeat", "background-size": "120%,120%", "opacity": 0.1 } ], "background.useFront": true, "background.useDefault": false ``` 可以根据自己的需要修改图片路径、位置、大小和透明度等属性。请确保图片使用png格式,并最好具有透明背景,以获得更好的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [pnger-vscode-extension:PNGER是一个扩展,使图像集成和背景去除比以往更加轻松!](https://download.csdn.net/download/weixin_42098251/18993573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [VSCode如何更换背景图片](https://blog.csdn.net/weixin_53350466/article/details/121873546)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值