一.前言


08.02更新:已魔改插件 可以直接下载插件使用了

10.18跟新:已发布到vscode扩展,直接搜索“background-cover”进行安装使用  下载地址

下载后手动安装就ok了,具体配置安装后点开插件有说明的!!!


今天看到了博客园 这篇文章 后  Visual Studio 2017 设置透明背景图  ,琢磨了下难道vscode不行吗。。

vscode目前有一个设置背景的插件 background  不过并不是整个界面显示,有点美中不足,所以就先下载了这个插件的源码,发现是改了其中一个css文件实现的,

本来想改下源代码重新发个包的,不过刚研究vscode插件没多久,改的话需要点时间。干脆直接改css替换下也挺方便的。有时间在改代码吧。。

先来个效果图。。

二.修改设置


"window.titleBarStyle": "custom",//首先把标题栏改为非原生的

  

三.获取css文件路径


一般都是在安装目录下 文件名:workbench.main.css

C:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css

或者打开开发人员工具查看 复制css地址

四.修改css样式


将下面css样式 追加到 workbench.main.css 文件里就行了,css样式也可以自己增加修改,,别忘记替换图片路径噢。。。

/*background start*/
body{pointer-events:auto !important;background-size:100% !important;opacity: 0.93 !important;background-position: 0 0 !important;background-image: url('file://E:/OneDrive/Pictures/overwatch/bg-53.jpg') !important;content:'';position:absolute;z-index:99999;width:100%;background-repeat:no-repeat;}
/*background end*/

 end....

  觉得好用点个赞呗。。欢迎来我们vscode群(376553669)尬聊

vscode 全透明背景图的更多相关文章

  1. VS2013 图片背景·全透明背景图(转)

    Note: 1.xaml编辑器和个别的编辑器(如HTML的)因为是承载在VS的一个子窗口上,所以背景依然是黑色的. 2.该背景必须在VS实验环境下使用. 效果图: 1.准备工作 1.先准备Visual ...

  2. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  3. 【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容

    最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记.为了让自己在前端方面学习更有成效,想 ...

  4. Visual Studio 2017 设置透明背景图

    一.前言 给大家分享一下,如何为VS2017设置透明背景图.下面是一张设置前和设置后的图片. 设置前: 设置后: 二.设置背景图片的扩展程序 我们打开VS的扩展安装界面:[工具]->[扩展和更新 ...

  5. 2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题

    文章目录 1.效果展示 2.设置背景图的详细步骤 2.1 .下载background插件 2.2 .选择扩展设置 2.3 .在setting.json中编辑 2.4.对应的配置文件 2.5 .重启电脑 ...

  6. IE6兼容透明背景图

    JS代码: <!--[if IE 6]><script src="~/Scripts/UI/DD_belatedPNG.js"></script> ...

  7. CSS实现响应式全屏背景图

    body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直.水平均居中 */ background- ...

  8. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  9. css设置全屏背景图,background-size 属性

    在写主题样式的时候经常会碰到用背景图铺满整个背景的需求,这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕,不留空白区域 保持图像的纵横比(图片不变形) 图片居中 不出现滚动条 多浏览器支持 ...

随机推荐

  1. Yii 读写分离 分表分库

    本文转自  http://hudeyong926.iteye.com/blog/1299989 实现一主一从,一主多从,多主多从的读写分离 .支持DAO,AR,其中Query builder只完成部分 ...

  2. php 日志扩展

    今天发现一个比较好的php应用日志扩展,这里先mark一下,回头有空再详细介绍: http://neeke.github.io/SeasLog/

  3. MaBatis(5)输入/输出映射

    本次全部学习内容:MyBatisLearning   输入映射: 通过parameType指定输入参数的类型,类型可以是简单类型,hashmap,pojo等     传递pojo的包装对象 需求: 即 ...

  4. DataTables.Queryable Sample

    1.DataTables.Queryable的例子项目使用了SQL Server CE数据库,花了几分钟时间转为使用LocalDB. 完整Web.config文件如下: <?xml versio ...

  5. PAT——1001. 害死人不偿命的(3n+1)猜想

    卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉一半.这样一直反复砍下去,最后一定在某一步得到n=1.卡拉兹在1950年的世界数 ...

  6. React Native IOS ---基础环境搭建(前端架构师)

    React Native -IOS 开发环境搭建 web架构(基础) 安装依赖 * 必须安装的依赖有:Node.Watchman 和 React Native 命令行工具以及 Xcode. npm 镜 ...

  7. Gradle Goodness: Working with Live Task Collection

    Gradle support the definition of so called live collections. These collections are mostly created ba ...

  8. ASP.NET教程

    1.ASP.NET是一个使用Html Css JavaScript和服务器脚本创建网页和网站的开发框架 2.ASP.NET支持三种开发模式:WebPages(Web页面).MVC(Model View ...

  9. linux mysql命令行查看显示中文

    linux 命令行查看mysql的库字符集是utf8,查询某个表时,仍然是显示不了中文, 之后使用了命令 mysql>set  names utf8;就可以正常显示中文了. 如何才更好的使mys ...

  10. 课时44.表单标签-input(掌握)

    1.什么是表单? 表单是专门用收集用户信息的 2.什么是表单元素? 2.1什么是元素? 在HTML中,标签/标记/元素都是指HTML中的标签 例如: <a>a标签/a标记/a元素 表单元素 ...