声明

以下内容为插件V2.2.9版本，部分内容已经过时

1. 安装背景插件

1. 我安装的是这个插件：background-cover 插件市场
   
   之所以选择这个插件的原因：

   1. 此插件可实现界面整体背景替换，而不是只替换代码区的背景
      参考下图，插件介绍界面：可见弹出的菜单、输入框、左侧主侧栏都应用了背景

   2. 此插件提供快捷的图形化配置界面，可满足基本的配置需求
      参考下图，插件介绍界面：

      1. 弹出的图形化界面可快速设定图片路径、插件启用/停用、背景透明度等功能
      2. 可通过图形界面快捷添加多张图片、随机切换功能

      

2. 插件内配置

点击状态栏右下角图标，弹出插件图形化设定界面，可轻松设定

1. 显示单张固定背景
   1. 选择一张背景图 --> 手动选择 --> 在弹出的窗口指定背景图
   2. 更新图片不透明度
2. 显示固多张图片
   1. 添加图片目录 --> 在弹出的窗口指定背景图存放的目录 --> 在图片列表指定要显示的图片
   2. 更新图片不透明度 --> 输入要设置的背景图的透明度 (范围 0.0 – 1.0)
   3. 关闭启动自动更换
3. 看菜单介绍还能实现网络图片展示
   如果能找到自动更新、可以配置筛选过滤的网站，可以实现更多功能 (自己能力不足，不会这个)

3. 拓展：修改插件配置文件，自定义背景样式

1. 初始配置结果：图片居中展示，感觉有点杂乱。希望能将图片大小缩小、显示在右下角
   

2. 修改思路

   1. vscode 基于 electron 开发，界面是根据 CSS 样式进行显示的
   2. 此插件 (以及很多的 vscode 背景切换插件) 的原理：在 vscode 加载、修改此插件设置时，自动更新 vscode 对应的 CSS 样式，以实现界面背景的更改
   3. 因此，只要找到插件中配置 CSS 样式的代码，再按照 CSS 的规则修改对应内容，即可实现想要的效果

3. 修改步骤

   1. 找到插件对应安装的目录 (我的电脑系统 windows 10，不同系统可能不同)
      C:\Users\用户名\.vscode\extensions\manasxx.background-cover-2.2.9
      找不到的直接搜索插件的安装文件夹background-cover

   2. 安装目录下打开修改 vscode 配置的插件文件
      配置文件：插件安装目录\out\FileDom.js
      

   3. 在相关 CSS 配置处，修改成自己想要的样式
      代码在body部分 (红色方框内)，除opacity和background-image外的内容
      即：蓝色方框内的内容可依据需要增删、修改
      
      默认选项为：(下一节会具体说明)
      - background-size: cover 背景图大小，cover = 完全铺满整个画面
      - background-repeat: no-repeat 背景图是否重复显示，no-repeat = 不重复显示
      - background-position: center 背景图显示位置，center = 居中 (上下 & 左右 均居中)
      - 同时还可看到：透明度其实修改的就是opacity参数

      相关的 CSS 样式

      1. background-repeat 是否重复显示背景图片
         mozilla-mdn：background-repeat 样式文档
         

         可选的值：

         /* 单值语法，即只填写一个值的写法，意味着两个方向 (水平、垂直方向) 都采用这个设定 */
         background-repeat: repeat-x;      // 只在水平方向上重复
         background-repeat: repeat-y;      // 只在垂直方向上重复
         background-repeat: repeat;        // 在水平、垂直方向上都无空隙重复，保持图形的长宽比 (即边缘的图形可能显示不全)
         background-repeat: space;         // 在水平、垂直方向都无空隙重复，但两重复图之间有间隔，不是紧密连接
         background-repeat: round;         // 在水平、垂直方向上都无空隙重复，保持每张图片都能完整显示 (图片会被缩放)
         background-repeat: no-repeat;     // 在水平、垂直方向上都不重复 (即只显示一张图片)
         
         /* 双值语法: 水平horizontal | 垂直vertical ，即第一个值设定的是水平方向，第二个值设定的是垂直方向，两个值用空格间隔 */
         background-repeat: repeat space;    // 水平方向无空隙重复，竖直方向有空隙重复
         background-repeat: repeat repeat;   // 水平、竖直方向，均为无空隙重复
         background-repeat: round space;     // 水平方向无空隙重复，并保持每张图片都能完整显示，垂直方向不重复 (图片的宽度会被缩放)
         background-repeat: no-repeat round; // 水平方向不重复，竖直方向无空隙重复，并保持每张图片都能完整显示 (图片的高度会被缩放)
         

         实例：
         

      2. background-size 背景的尺寸
         mozilla-mdn：background-size 样式文档
         
         可选的值：

         /* 关键字 */
         background-size: cover    // 保持图片纵横比，扩大图片直至覆盖满整个屏幕
                                   // 窗口不会有空白
         background-size: contain  // 保持图片纵横比，缩放图片直至图片在窗口中能完全显示
                                   // 若图片与窗口大小不同，则会出现无图像覆盖的空白部分
         
         /* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
         /* 即：保持背景图片的纵横比，通过宽度确定图片整体大小 */
         background-size: 50%   // 整体窗口的 50% 宽度
         background-size: 3em   // 宽度为 3em
         background-size: 12px  // 宽度为 12 像素点
         background-size: auto  // 宽度自动 (即大小自动)
         
         /* 两个值 */
         /* 第一个值指定图片的宽度，第二个值指定图片的高度 */
         /* 指定固定值时，若取值大于窗口大小，图片会显示不全 */
         background-size: 50% auto    // 宽度为整体窗口的 50%，高度自动 (同 一个值 的 50%)
         background-size: 3em 25%     // 固定值：宽度为 3em，高度为窗口的 25%
         background-size: auto 6px    // 固定值：宽度自动，高度 6 像素 (即保持纵横比缩放，宽度由高度决定)
         background-size: auto auto   // 长度、宽度均自动
                                      // 原图有长度、宽度，则按照原图的长度、宽度显示
                                      // 原图没有长宽 (如矢量图)，则按照比例缩放至覆盖整个窗口，同 关键字 contain 的显示方式
         
         /* 逗号分隔的多个值：设置多重背景 （略） */
         /* 多重背景：在一行表达式中设置多张背景图片的样式，不同图片的样式用 逗号 间隔 */
         /* 参考：https://www.w3school.com.cn/css/css3_backgrounds.asp */
         background-size: auto, auto     /* 不同于 background-size: auto auto */
         background-size: 50%, 25%, 25%
         background-size: 6px, auto, contain
         
         /* 全局属性 (略) */
         /* 即继承 父对象 的相关属性设定，咱们要的就是另起炉灶，所以这里不看了 */
         background-size: inherit;
         background-size: initial;
         background-size: unset;
         

         实例：
         

      3. background-position 背景图片的位置
         mozilla-mdn：background-position 样式文档
         
         可选的值：

         /* 关键字 */
         /* 可以只写一个方向的词，省略另一方向的词，省略的方向默认关键词是 center */
         /* 水平方向关键词：left、right、center <--> 左侧、右侧、居中 */
         /* 垂直方向关键词：top、bottom、center <--> 顶部、底部、居中*/
         background-position: top;      /* 垂直方向--位于顶部，水平方向--居中 */
         background-position: bottom;   /* 垂直方向--位于底部，水平方向--居中 */
         background-position: left;     /* 水平方向--位于左侧，垂直方向--居中 */
         background-position: right;    /* 水平方向--位于右侧，垂直方向--居中 */
         background-position: center;   /* 水平、垂直方向，均居中 */
         
         /* 百分比值 */
         /* 两个值： */
         /* 第一个值 XX% = 相对于窗口最左侧偏移 XX% */
         /* 第二个值 YY% = 相对于窗口顶部偏移 YY% */
         /* 一个值 ZZ% = 相对于窗口最左侧偏移 ZZ%，垂直居中(垂直偏移 50%) */
         background-position: 25% 75%;  /* 相对于窗口左侧偏移 25%，相对于窗口顶部偏移 75% (实际位置偏左下) */
         background-position: 35%;      /* 相对于窗口左侧偏移 35%，垂直居中 (垂直偏移 50%) */
         
         /* 固定长度值 */
         /* 两个值：
         background-position: 0 0;
         background-position: 1cm 2cm;
         background-position: 10ch 8em;
         
         /* 逗号分隔的多个值：设置多重背景 （略） */
         /* 多重背景：在一行表达式中设置多张背景图片的样式，不同图片的样式用 逗号 间隔 */
         /* 参考：https://www.w3school.com.cn/css/css3_backgrounds.asp */
         background-position: 0 0, center;
         
         /* 关键字 + 偏移量(固定长度/百分比) */
         /* 情况太多了，这里略，如果想了解，建议参考 MDN 页面 */
         background-position: bottom 10px right 20px;
         background-position: right 3em bottom 10px;
         background-position: bottom 10px right;
         background-position: top right 10px;
         
         /* 全局属性 (略) */
         /* 即继承 父对象 的相关属性设定，同样略 */
         background-position: inherit;
         background-position: initial;
         background-position: revert;
         background-position: unset;
         

         实例：
         

4. 修改实例

   1. 滑稽表情重复显示

      1. 效果
         

      2. CSS 代码配置

         body{
         	background-repeat: repeat;    /* 水平、垂直方向均重复 */
             background-position: center;  /* 以窗口中心开始重复显示 */
             backgroud-size : cover;       /* 显示满整个窗口 */
         	opacity:${opacity};
         	background-image:url('${this.imagePath}');
         }
         

   2. 右下角显示图像 (这是我个人的配置方案)

      1. 效果
         

      2. CSS 代码配置

         body{
         background-size: auto 70%;           /* 背景图尺寸：保持纵横比，高度为窗口的 70%，宽度跟随高度 */
         background-position: right bottom;   /* 背景图位置：窗口右下角 */
         background-repeat: no-repeat;        /* 背景图不重复，只显示单张 */
         opacity:${opacity};
         background-image:url('${this.imagePath}');
         }
         

   3. 左侧显示图片

      1. 效果
         

      2. CSS 代码设置

         body{
         background-size: contain;           /* 背景图尺寸：保持纵横比，缩放到完整显示整张图片 */
         background-position: left center;    /* 背景图位置：水平靠左，垂直居中 */
         background-repeat: no-repeat;        /* 背景图不重复，仅显示单张图片 */
         opacity:${opacity};
         background-image:url('${this.imagePath}');
         }
         

5. 注意事项

   1. 插件要有管理员权限才能运行

      设置管理员启动的方法：

      1. 开始菜单，右键 vscode 图标 --> 更多 --> 打开文件位置
      2. 在弹出的窗口中，右键 vscode 快捷方式 --> 属性
      3. 在弹出的属性界面中，选择兼容性选项卡 --> 以管理员权限运行此程序 --> 确定并退出属性界面
      4. 重启 vscode

   2. 由于插件运行原理，要修改 vscode 自身的文件，因此会弹出 “vscode似乎已经损坏” 的提示
      

      1. 可以在提示弹框右上角的设置点击“不再提示”，关闭提示
         

      2. 也可以在商店页面搜索安装 Fix VSCode Checksums插件
         安装完成后，打开“命令面板”，找到下面的 “Apply” 选项，点击即可修复
         
         感想：既想要自由又想要保障是不可能的

   3. 修改 CSS 样式之后，要先关闭插件更换背景的功能，再重新选择一张图片，才能看到修改后的样式效果
      具体步骤如下：

      1. 保存修改的 FileDom.js 文件
      2. 点击状态栏右下角，弹出插件设置菜单，点击“关闭背景图”
      3. 弹出是否重新加载窗口，选“是”
      4. vscode 重启后，再次点击状态栏右下角，弹出插件设置菜单，点击“选择一张背景图”
      5. 选择背景图后，弹出是否重新加载窗口，选“是”
      6. vscode 再次重启后，即可看到修改后的效果

   4. 背景图片建议

      1. 选用透明背景的图片，搭配 vscode 的各种插件式的主题都比较好融入
      2. 尽量选清晰一些的图片，否则放大之后看到像素点很蛋疼
      3. 也可考虑用小图标重复排布，实现类似平铺的效果

   5. 插件优化建议
      建议插件添加2个功能：快捷打开背景的 CSS 样式文件，快捷重载自定义的 CSS 样式文件

6. 感想

   1. 前端的东西既繁杂由有趣
      1. 繁杂：一个背景图片就有这么多的属性，每个属性还有不同值的写法
      2. 有趣：前端的东西，只要能跑起来，修改代码效果立马能看见 (毕竟前端就是拿来给大家交互的)
      3. 要学习一些前端的知识了，至少要学会简单的 HTML、CSS、JS 语法
   2. vscode 的可自定义性很丰富
   3. 可以从开源软件中学到很多