如何通过CSS代码解决移动设备端首页图片封面自适应响应式显示问题

问题根因 #

1. CSS属性书写错误：position: cover 是无效属性值，position可选值仅为static、relative、absolute、fixed、sticky，该错误会直接导致元素定位失效，是最直接的显示异常原因。
2. 移动端兼容性问题：background中设置的fixed属性（即background-attachment: fixed）在iOS、多数国产安卓移动端浏览器上兼容性极差，和当前元素上的transform 3D属性叠加时，会触发浏览器渲染bug，导致背景图裁剪、无法完整显示。
3. 高度计算失效：你设置了height: 40%，百分比高度需要父元素有明确设置的高度值才能正常计算，如果父元素高度为自适应，这个40%会失效，导致元素高度不符合预期，背景显示不全。
4. CSS语法错误：你贴出的CSS代码末尾存在多余的闭合大括号}，若实际代码中也存在，会导致后续CSS规则失效，也可能影响封面的样式渲染。

修复方案 #

• 修正无效CSS属性，把position: cover改成对应需求的定位值，常规封面场景可设置为position: relative，如果需要脱离文档流定位可设置为position: absolute，同时给父元素加position: relative。
• 针对移动端单独适配背景附着属性，移除fixed值，改为scroll即可，若需要保留视差效果建议用JS实现，不要依赖CSS fixed属性避免和transform属性冲突。
• 把高度单位从%改成vh，直接相对于视口高度计算，比如height: 40vh，不需要依赖父元素高度，移动端适配更稳定。
• 删除CSS末尾多余的闭合大括号，对比演示版本的视差插件配置，检查当前的transform参数、元素层级是否和演示版一致，排除插件参数配置错误的可能性。

修正后参考CSS代码 #

div.pth-hero__scene.pth-parallax {
  background:  no-repeat scroll center center / cover rgba(0, 0, 0, 0);
  height: 40vh;
  left: 0;
  position: relative;
  top: 10%;
  width: 100%;
}

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