VSCode预览不更新 + CSS背景半透明遮罩不显示问题求助

一、VSCode保存修改后网页不更新的解决办法 #

• 强制刷新浏览器：按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac），跳过缓存加载最新页面
• 开启VSCode自动保存：打开设置（快捷键Ctrl+,），搜索files.autoSave，选择afterDelay或onFocusChange，确保修改后自动同步到文件
• 排查扩展冲突：暂时禁用所有VSCode扩展，再逐个启用，找出可能导致保存失效的扩展
• 检查本地服务器配置：如果使用Live Server这类工具，确保服务器设置了禁用缓存，或者直接重启服务器

二、背景图半透明遮罩不显示的修复 #

你的遮罩元素没有正确定位，无法覆盖在背景图上方。修改CSS代码如下：

.landing-page {
    width: 100vw;
    height: 100vh;
    background-image: url('bg.jpg');
    background-position: center;
    background-size: cover;
    position: relative; /* 设置相对定位，作为子元素定位的参考 */
}

.landing-page-shadow {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, .3);
    position: absolute; /* 绝对定位，覆盖整个父元素 */
    top: 0;
    left: 0;
}

原因说明：父元素.landing-page未设置定位时，子元素的绝对定位会基于整个文档而非父元素。添加position: relative后，子元素.landing-page-shadow的绝对定位会以父元素为基准，配合top:0和left:0就能完全覆盖背景图，遮罩效果自然显示。本地环境可能存在未察觉的CSS冲突，导致和CodePen中的表现不一致。

内容的提问来源于stack exchange，提问作者SlaV0