如何在Safari浏览器中实现文本滚动时背景图片固定效果

直接替换原有背景相关CSS代码即可，不会锁定页面滚动，适配当前使用的w3schools模板结构：

/* 初始化基础容器属性 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 固定背景伪元素，替代background-attachment: fixed */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* 替换为你的树叶背景图地址 */
  background: url("./leaf-background.jpg") center / cover no-repeat;
  z-index: -1;
  /* 触发Safari硬件加速，避免滚动卡顿闪烁 */
  will-change: transform;
}

注意事项 #

• 删除原有body样式中设置的background-attachment: fixed以及对应的背景属性，避免样式冲突
• 若出现页面内容被背景遮挡的情况，给页面内容的外层容器添加position: relative; z-index: 2;即可
• 该方案兼容所有Safari版本，不会出现背景重复、无法铺满全屏的问题

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