页面背景图适配问题：随机重载图移动端无法全屏显示

你的问题出在背景图容器的缩放处理和视口适配逻辑上，以下是针对性的修改方案：

关键修复要点 #

1. 给背景容器添加溢出隐藏
   给#bg添加overflow: hidden，避免缩放后的背景图超出容器范围被裁切。

2. 移动端缩放比例适配
   移动端屏幕尺寸较小，固定的scale(1.125)会导致背景图过度放大、超出视口。通过媒体查询在移动端降低缩放比例，保证图片完整覆盖屏幕。

3. 配置正确的视口元标签
   在HTML头部添加视口标签，确保页面尺寸正确适配移动端设备：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

修改后的完整CSS代码 #

#bg {
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  overflow: hidden; /* 新增：隐藏溢出内容，避免图片裁切 */
}

#bg:before,
#bg:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#bg:before {
  -moz-transition: background-color 2.5s ease-in-out;
  -webkit-transition: background-color 2.5s ease-in-out;
  -ms-transition: background-color 2.5s ease-in-out;
  transition: background-color 2.5s ease-in-out;
  -moz-transition-delay: 0.75s;
  -webkit-transition-delay: 0.75s;
  -ms-transition-delay: 0.75s;
  transition-delay: 0.75s;
  background-image: linear-gradient(
      to top,
      rgba(19, 21, 25, 0.5),
      rgba(19, 21, 25, 0.5)
    ),
    url("../../images/overlay.png");
  background-size: auto, 256px 256px;
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  z-index: 2;
}

#bg:after {
  -moz-transform: scale(1.125);
  -webkit-transform: scale(1.125);
  -ms-transform: scale(1.125);
  transform: scale(1.125);
  -moz-transition: -moz-transform 0.325s ease-in-out,
    -moz-filter 0.325s ease-in-out;
  -webkit-transition: -webkit-transform 0.325s ease-in-out,
    -webkit-filter 0.325s ease-in-out;
  -ms-transition: -ms-transform 0.325s ease-in-out,
    -ms-filter 0.325s ease-in-out;
  transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
  background-image: url("https://pic.re/image");
  /* ../../images/bg.jpg */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}

/* 新增：移动端缩放适配 */
@media (max-width: 768px) {
  #bg:after {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
  }
}

body.is-article-visible #bg:after {
  -moz-transform: scale(1.0825);
  -webkit-transform: scale(1.0825);
  -ms-transform: scale(1.0825);
  transform: scale(1.0825);
  -moz-filter: blur(0.2rem);
  -webkit-filter: blur(0.2rem);
  -ms-filter: blur(0.2rem);
  filter: blur(0.2rem);
}

body.is-preload #bg:before {
  background-color: #000000;
}

修复说明 #

• overflow: hidden 限制背景图的显示范围，确保缩放后的图片不会超出容器边界。
• 媒体查询针对小屏设备降低缩放比例，平衡视觉效果与全屏覆盖需求。
• 视口元标签是移动端适配的基础，保证CSS的百分比尺寸能正确映射到设备屏幕。

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