VScode设置背景图片

目录

移动端滚动

VScode设置背景图片

after伪元素图标

×关闭图标

层叠顺序

Vuex替代方案

---

移动端滚动：

 window.onscroll = function() {
   //为了保证兼容性，这里取两个值，哪个有值取哪一个
   //scrollTop就是触发滚轮事件时滚轮的高度
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   console.log("滚动距离" + scrollTop);
 }


// 下面的写法移动端不兼容
window.addEventListener('scroll', () => {
    
}

---

VScode设置背景图片

找到程序 Microsoft VS Code\resources\app\out\vs\workbench\workbench.main.css

修改css文件可以摆脱设置背景图插件的局限性,可以自由DIV

VScode的多数样式使用了bootstrap建议不要去改

/* 局部设置:显示在代码编写的页面里,不包含菜单栏和工具栏建议使用png抠图效果更佳 */

body {
    background-image: url('file:///C:/Users/../../xxxx.png');
    background-size: 20%;
    background-position: 100% 100%;
    opacity: 0.75;
    background-repeat: no-repeat;
}

/* 全局设置:包含整个VScode窗口(包含活动栏,不包含状态栏),背景图设置为电脑显示屏比例大小效果更佳 */

body {
    background-image: url('file:///C:/Users/../../xxxx.png');
    background-size: 100%;
    opacity: 0.75;
    background-repeat: no-repeat;
}

/* 通过CSS动画属性 达到背景图的切换*/
/* 缺点:图片路径和播放顺序,时间都要在文件里配置*/

body {
    background-size: 100%;
    opacity: 0.75;
    background-repeat: no-repeat;
    animation: myfirst 50s infinite;
}

@keyframes myfirst{
    0%{
         background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg0.jpg');
    }
    20%{
         background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg1.jpg');
    }
    40%{
         background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg2.jpg');
    }
    60%{
         background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg3.jpg');
    }
    80%{
         background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg4.jpg');
    }
    100%{
         background-image:url('file:///C:/Users/Administrator/Pictures/vscodebg/vscodebg5.jpg');
    }
}

    打开开发者工具方便调试：帮助(H）> 切换开发人员工具

    推荐插件  background-cover

---

after伪元素图标

空心三角箭头

<span class="arrow"></span>

.arrow:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 1px solid #656565;
    border-right: 1px solid #656565;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

 上下左右可以通过border和transform: rotate调节

×关闭图标

<span class="close"></span>

.close{
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #95835e;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

---

层叠顺序

Stacking Order

background/border

z-index < 0

block

float

inline/inline-block

z-index:auto/z-index:0

z-index > 0

---

Vuex替代方案

Vuex在页面刷新时会重置存在本地相对稳定

// 存
localStorage.setItem("objName", JSON.stringify(data));

// 取
JSON.parse(localStorage.getItem("objName"));

// 删
localStorage.removeItem("objName");