精华内容
下载资源
问答
  • vscode 背景图片的设置

    千次阅读 2020-07-04 11:19:37
    "background-size": "100%,100%", "opacity": 0.2 // 设置背景图片并且设置透明度 结束 上述代码重要位置解说: “opacity” 重要参数设置透明度,如果不设置很遗憾,你的vs桌面只剩下图片了,代码神马的就不要...

    1 安装background扩展

             1.1 操作流程 文件-> 首选项 -> 扩展 -> 输入background 点击安装

             1.2 选择最左侧工具栏选择扩展 输入background 点击安装

    2 设置 background

             1.1 调出流程 文件-> 首选项 -> 扩展 -> 找到background ->点击有下家的配置按钮 -> 配置扩展设置

    点击下图红色框

             1.2 按f1,输入setting.json ,选择首选项: 打开设置

             在json中输入如下内容,位置随便

    // 设置背景图片并且设置透明度 开始

        "background.enabled"true,

        "background.useDefault"false,

        "background.customImages": [

            "file:///C:/SUNYAN/pycharmBackground/pycharm1.jpg",

            "file:///C:/SUNYAN/pycharmBackground/timg2.jpg",

            "file:///C:/SUNYAN/pycharmBackground/timg3.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.2

        // 设置背景图片并且设置透明度 结束

     

    上述代码重要位置解说:

    “opacity” 重要参数设置透明度,如果不设置很遗憾,你的vs桌面只剩下图片了,代码神马的就不要想看见了

     

    "background.enabled": true,是插件是否启用, true 启用

    "background.useDefault": false,是否使用默认图片,改成false,不默认,这个条件为false才能自己设定图片

    "background.customImages" 添加本地图片组,据说数组长度最大为三,但是为什么要设置那么多呢

    "background.customImages": [

    "file:///C:/SUNYAN/pycharmBackground/timg3.jpg"],

    “opacity” 重要参数设置透明度,如果不设置很遗憾,你的vs桌面只剩下图片了

    其他参数如没有特殊癖好的,了解一下就好

    展开全文
  • VSCode——修改VSCode背景图片

    万次阅读 多人点赞 2018-11-27 14:23:10
    1.以管理员身份运行VS Code,安装background插件 2.打开设置,在搜索框中输入background,选择扩展中...4.每次vscode更新都会不显示图片,只要以管理员身份重启即可 效果如下 我用的图片为:  

    1.以管理员身份运行VS Code,安装background插件

    2.打开设置,在搜索框中输入background,选择扩展中的plugin background,选择在setting.json中编辑

    3.在用户设置中输入以下代码,修改完后按Ctrl+S保存,会提示重启VS Code,点击确定后即可完成修改

     代码如下:

    //background 的相关配置
        "update.enableWindowsBackgroundUpdates": true,
        "background.customImages": [
            "file:///F:/Picture/Yukino/vs_background.png"//图片地址
        ],
        "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.useFront": true,
        "background.useDefault": false,//是否使用默认图片
    

    当然你也可以选择多个图片,并设置为不同样式,这样当你开两个并列窗口时,每个窗口都会显示。

     "background.customImages": [
            "file:///F:/Picture/Yukino/vs_background.png", "file:///F:/Picture/Yukino/vs_background123.png"
        ],
        "background.styles": [
            {
                "content":"''",
                "pointer-events":"none",
                "position":"absolute",
                "width":"100%",
                "height":"100%",
                "z-index":"99999",
                "background.repeat":"no-repeat",
                "background-size":"20%,20%",
                "opacity":0.1
            },
            {
                "content":"''",
                "pointer-events":"none",
                "position":"absolute",
                "width":"100%",
                "height":"100%",
                "z-index":"99999",
                "background.repeat":"no-repeat",
                "background-size":"30%,30%",
                "opacity":0.1
            }
        ],
        "background.useFront": true,
        "background.useDefault": false,

     

    注意:

    1.安装该插件会令VS Code发出警告,选择不再显示即可

    2.必须以管理员身份运行才能修改

    3.最好使用透明背景的图片

    4.每次vscode更新都会不显示图片,只要以管理员身份重启即可

    效果如下

    我用的图片为:

     

    展开全文
  • 设置vscode背景图片

    2021-01-13 14:46:20
    首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x 然后,在设置中找到settings.json文件 再然后,在文件下面添加以下代码: "background.customImages": [ "file:///E:/file/Googlefile/4.png...

    首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x
    在这里插入图片描述

    然后,在设置中找到settings.json文件
    在这里插入图片描述
    再然后,在文件下面添加以下代码:

    
        "background.customImages": [
        "file:///E:/file/Googlefile/4.png" //本地图片
        ],
        //background 的相关配置
        "update.enableWindowsBackgroundUpdates": true,
        "background.style": {
            "content":"''",
            "pointer-events":"none",
            "position":"absolute",//图片位置
            "width":"100%",
            "height":"100%",
            "z-index":"2",
            "background.repeat":"no-repeat",
            "background-size":"100%,100%",//图片大小
            "opacity": 0.3, //透明度
        },
        "background.useFront": true,
        "background.useDefault": false,//是否使用默认图片
    

    最后,效果图如下所示
    在这里插入图片描述

    注意:
    安装该插件,vscode会发出警告,选择不再显示即可。另外每次vscode更新后第一次打开都会不显示图片,关掉重启即可。由于图片是‘覆盖’在代码上面,所以代码会稍微模糊,目前没有找到解决方法(各位客官知道的话,还望不吝赐教)。
    手绘处女作,哈哈哈
    在这里插入图片描述

    展开全文
  • 更换背景的原因----自己嫌那个黑黢黢的背景太丑了,影响敲代码的心情。于是乎,我就把那丑不拉几的背景给换啦! ????下面是步骤(●’◡’●) 1. 第一步!先安装个插件 第一步来啦!咱先安装个插件:background (这...

    🐟 更换背景的原因----自己嫌那个黑黢黢的背景太丑了,影响敲代码的心情。于是乎,我就把那丑不拉几的背景给换啦!
    🐟下面是步骤(●’◡’●)

    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” 这个东西是我的图片在电脑里的存储位置,大家用的时候要记得把这个换成自己的图片存储位置哦!

    3. 完结!让我碎碎念一下

    ❀希望上述方法对大家有帮助呀!让你们都把vscode整上自己喜欢的图片,做一只优雅的程序帅锅、程序美女!
    ❀感觉有帮助的给我点个赞呗(づ ̄3 ̄)づ╭❤~
    ❀完结撒花!

    展开全文
  • 突然想设置一下背景,网上扒了很多方法,但是最后还是绕了很多弯路(大部分设置的背景都只是代码块的背景),于是总结了以下两个方法 效果: 修改全局背景图设置步骤: 安装background-cover插件 管理员身份...
  • vscode背景图片不显示问题

    万次阅读 2019-03-13 19:52:28
    这或许是vscode的一个bug,以防万一,我把它记下来。 首先,图片不显示有几个可能: 图片文件坏了 路径写错了 样式写错了 我要插入的就是那个小三角,在IDEA写的路径:background-image:url(/...
  • 整体效果 出现问题 不管是哪种方法,都是靠修改vscode底层文件的方法来实现背景图的改变,所以vscode会报警告,此时我们点忽略就ok了;但是在顶部会出现 [不受支持] 的字样,很是不爽,强迫症的我实在看不下去了。 ...
  • 1.以管理员身份运行VS Code,安装background插件 2.打开设置,在搜索框中输入background,选择扩展中的plugin ...每次vscode更新都会不显示图片,只要以管理员身份重启即可 效果如下 我用的图片为: 可以直接下载使用
  • VSCode背景图片修改

    2021-10-14 23:42:54
    通过拓展右下角的小齿轮进入拓展设置,取消勾选 Use Default(使用默认图片) 在拓展设置界面找到Custom Images下方的setting.json进入设置界面 复制以下代码并根据自身需求修改 按Ctrl+S键保存当前设置,右下角...
  • VSCode背景图片设置

    千次阅读 2020-06-12 10:47:10
    非常可爱的,想着能不能让编辑器中间的部分也能有背景图片呢? 所以最简单的解决方法,找到vscode的安装位置,找到里面的workbench.desktop.main.css Microsoft VS Code\resources\app\out\vs\workbench 打开...
  • VScode 背景图片修改

    千次阅读 2020-11-11 16:01:59
    将下面的 代码复制到setting.json 中 customImages: [] 设置背景图片的 地址 在你本地放一个图片哈 "background.style": { "content": "''", "pointer-events": "none", "position": "absolute", "z-index":...
  • VScode背景推荐

    2021-04-04 22:47:46
    2.安装完成之后可以看到右下角有一个类似图片的图标,点开。 3.点开之后就可以看到相应的选项设置啦。 4.然后可以把自己比较喜欢的图片整理到一个文件夹里面,选择Add directory 选项,选择那个文件夹就...
  • 切换vscode背景图片

    2021-04-26 21:00:10
    切换vscode背景图片 下图是切换之后的效果图: 第一步: 点击扩展的标志 第二步: 搜索background,选择background-cover这个插件,然后安装 第三步: 选择右下角的图标 第四步: 选择一张背景图,和透明度 ...
  • VScode 设置 背景图片

    2021-11-29 14:36:26
    1.在vscode扩展中,找到background这个插件并安装 2. 打开 settings.json设置 打开 文件>首选项>设置 3.设置自己喜欢的背景图 // background相关配置 Start "background.useDefault": false, // ...
  • 自定义 VSCode 背景图片 两步搞定 ! 不安装任何插件 , 自定义修改 VSCode背景图片 . 效果 : 在 VSCode 的安装目录下找到 workbench.desktop.main.css 文件 . 我的位置是 : C:\App\VSCode\Microsoft VS Code\...
  • vscode设置背景图片

    千次阅读 2021-01-14 22:54:00
    我们通过修改workbench.desktop.main.css文件来做到更换背景,因为vscode好像本来就跟网页是一个模式,我翻帮助的开发人员选项就跟浏览器打开一样。        我们首先打开vscode...
  • vscode设置背景图片~~贼好用

    千次阅读 2020-07-17 11:27:47
    [ "file:///C:/Users/Administrator/Desktop/图片/kui.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.15 } 设置图片路径然后报下面的错 再安装这个...
  • vscode透明背景图片

    千次阅读 2019-05-15 16:07:54
    自定义设置vscode背景图片 效果图 找到源码路径 鼠标放上面就看的到,也可以直接点右键 copy link address ,在文件夹中打开 找到之后,打开 添加css代码 追加代码 body{ pointer-events:auto !important; ...
  • 自定义VSCode背景图片

    2020-03-08 17:49:44
    先给你们看下我的背景。。如下: 1. 管理员身份运行VS Code,安装background插件 2. 文件—首选项—设置(或者快捷键Ctrl+Shift+X),找到扩展中的plugin background,选择在setting.json中编辑 3. 在用户设置...
  • 所以我们可以直接找到它的css文件,来设置背景 第一步 找到文件workbench.main.css,一般在vscode的安装目录C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench里或者C:\Users\用户名\AppData\...
  • ![图片说明](https://img-ask.csdn.net/upload/201907/07/1562512647_813287.png) 复制大佬的代码去更换背景图片,但是第一行总是出现这个问题“End of file expected” 希望有大佬帮我解惑
  • vscode背景图怎么换

    2020-12-20 20:03:24
    vscode中设置背景图片的方法:1、vscode中点击扩展,然后搜索background,然后点击“insert”安装:2、 安装完成后,重启vscode,进入User Settings用户设置,在搜索框中搜索background进行配置:用户配置//...
  • VScode设置背景图片 成功!

    千次阅读 2020-02-27 18:43:28
    结合其他的博主内容: 一、第一种方法:插件background设置 这种发法有点麻烦了,可能...2. 我的目录如下: VScode\Microsoft VS Code\resources\app\out\vs\workbench 打开workbench.desktop.main.css文件 ...
  • repeat", "background-size":"25%,25%",//图片大小 "opacity":0.2 //透明度 }, "background.useFront": true, "background.useDefault": false,//是否使用默认图片 我用的背景图片是这个: 效果如下::
  • VSCode设置全背景图片

    千次阅读 2020-09-11 22:08:48
    加入下面的代码,保存,重启vscode即可。 body { background-image: url('file:///F:/高清壁纸/wallhaven-96qy3w_1920x1080.png'); background-size: 100%; opacity: 0.9; background-repeat: no-repeat; } ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,644
精华内容 1,457
关键字:

vscode背景图片