如何设置 vs code 背景图

简介: 安装相关依赖插件打开应用商品然后搜索 background 如下图,点击安装打开 文件>首选项>设置添加如下代码"background.enabled": true,"background.

安装相关依赖插件

打开应用商品然后搜索 background 如下图,点击安装
1

打开 文件>首选项>设置

添加如下代码

"background.enabled": true,
"background.useDefault": false,
"background.customImages": [
    "file:///E:/bg.jpg"
],
"background.style": {
    "content": "''",
    "pointer-events": "none",
    "position": "absolute",
    "z-index": "99999",
    "width": "100%",
    "height": "100%",
    "background-position": "center",
    "background-repeat": "no-repeat",
    "background-size": "100%,100%",
    "opacity": 0.3
}

第一句"background.enabled": true,是插件是否启用,当我们把插件下载下来并且重启vscode之后,就已经有了这句话
第二句"background.useDefault": false,是否使用默认图片,改成false,不默认,我们要设置自己想要的!
第三句 设置路径,细心的道友已经注意到了,这是一个数组,也就是说可以设置多张不同的图片!记住,最多三张! D:/bg.jpg 是图片的路径地址
"background.customImages": [
"file:///D:/bg.jpg"
],
最后就是background.style了,大家看着设置就好了,懂点css的都知道。注意后面的"opacity": 0.1透明度是可以设置的。

最后重启VS CODE

最终效果如下
2

相关文章
|
11天前
VSCode 如何设置背景图片
VSCode 如何设置背景图片
|
2月前
|
Web App开发
vscode设置默认浏览器
vscode设置默认浏览器
|
11天前
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
设置VSCode代码编辑器右侧的Minimap代码缩略图滚动条切换显示、隐藏的快捷键Alt+M
|
11天前
|
JSON JavaScript 前端开发
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
设置WebStorm像VSCode一样每行代码结尾自动格式化加入“;”分号(JavaScript、TypeScript格式化)
|
4月前
|
JSON 数据格式
VSCode无法写入用户设置 请打开用户设置并清除错误或警告, 然后重式
VSCode无法写入用户设置 请打开用户设置并清除错误或警告, 然后重式
|
5月前
vscode 字体大小和行间距设置
vscode 字体大小和行间距设置
188 0
|
4月前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
|
8月前
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
543 0
|
11天前
设置VSCode编辑器、终端字体为微软雅黑Microsoft Yahei,字号大小为11像素
设置VSCode编辑器、终端字体为微软雅黑Microsoft Yahei,字号大小为11像素
|
11天前
VSCode设置合并行快捷键
VSCode设置合并行快捷键