CSS实现body背景遮罩时滚动异常问题求助

开发者阿泽

2026-7-10

背景遮罩滚动问题解决方案

问题描述

尝试给页面添加背景遮罩时遇到两个问题：

给遮罩div设置position: fixed后，页面无法滚动
移除fixed定位并设置height: 100vh时，遮罩仅覆盖当前视口区域，滚动页面后遮罩消失

解决方案

要实现遮罩覆盖整个页面且不影响滚动，只需调整CSS的高度和定位逻辑：

调整body的高度属性：去掉height:100vh，改用min-height:100vh，让body根据内容自动适配高度，而非固定视口高度
修改遮罩div的样式：去掉height:100vh，改用min-height:100vh并设置width:100%，这样遮罩会跟随页面内容高度自动延伸，完全覆盖整个页面区域，无需fixed定位
可选优化：给body的背景图添加background-attachment: fixed，让背景图固定不动，滚动时提升视觉体验

修改后的CSS代码

body{
  background-image: url(https://www.movieloversmontana.com/wp-content/uploads/2020/04/Movie-Lovers-Logo-Square.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; /* 可选：固定背景图 */
  margin: 0;
  padding: 0;
  color: white;
  width: 100%;
  min-height: 100vh; /* 改为最小高度，适配内容 */
}
div{
  background-color: rgba(80,80,80,0.8);
  min-height: 100vh; /* 跟随body高度，覆盖整个页面 */
  width: 100%;
}

form{
  width: 60vh;
  margin: 0 auto;
  padding: 20px 0; /* 可选：增加表单上下内边距，避免内容贴边 */
}

h1, #description{
  color: white;
  text-align: center;
}
input{
  display: block;
  margin: 5px 0 15px; /* 可选：增加输入框间距，优化布局 */
}