VSCode修改为背景透明图片

文章目录

      • 1. 可以通过直接修改VSCode的css代码来设置
        • 1.1 首先要找到css文件:
        • 1.2 双击打开workbench.desktop.main.css文件并加入如下代码:
        • 1.3 也可以将background都写到一行:
        • 1.4 修改完成后重新启动vsCode
      • 2. 可以通过下载插件来设置
        • 2.1 首先下载安装插件background:
        • 2.2 然后去设置:

1. 可以通过直接修改VSCode的css代码来设置

1.1 首先要找到css文件:

VSCode修改为背景透明图片_第1张图片

1.2 双击打开workbench.desktop.main.css文件并加入如下代码:

	body {
     
	    /*背景图片的路径*/
	    background-image: url(C:/Users/Lenovo/Desktop/壁纸/15.jpg);
	    /* 图片不重复 */
	    background-repeat: no-repeat;
	    /* 图片位置 */
	    background-position: center;
	    /* 图片大小 */
	    background-size: cover;
	    /* 透明度 */
	    opacity: 0.7;
	}

1.3 也可以将background都写到一行:

	body {
     
    	background: url(C:/Users/12930/Pictures/123.jpg) no-repeat center/cover;
    	opacity: 0.7;
	}

必须修改图片位置,并复制代码到最后一行

VSCode修改为背景透明图片_第2张图片

1.4 修改完成后重新启动vsCode

2. 可以通过下载插件来设置

2.1 首先下载安装插件background:

2.2 然后去设置:

    文件→首选项→设置,在settings.json中编辑(右面往下拉一会可以看到)

    在settings.json里面添加如下代码:

	"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, //是否使用默认图片

小编建议使用第一种方式

你可能感兴趣的:(HTML,开发工具,透明背景,css,html,vsCode,背景)