html - 在没有背景附件的情况下使视差在 iOS 上工作 :fixed

标签 html css parallax web-development-server

有谁知道是否有合理的方法可以使这种视差背景滚动效果在 iOS 设备上工作?这是我正在处理的页面。 http://districtdentalontheouachita.com/new/

现在我为实现这种效果所做的就是使用 background-attachment: fixed;

这是我的部分的CSS

.section1 {
  width:100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-image: url("images/dental1.jpg");
  background-attachment:fixed;
}

客户真的想要这个效果,但我不能让它在 iOS 上工作......

最佳答案

改为使用 position: fixed,然后进行一些位置调整。

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

这个加上一些 z-index,可以在任何设备上产生效果。不幸的是,ios 不能与 background-attachment: fixed 一起使用,但总有另一种方法。

关于html - 在没有背景附件的情况下使视差在 iOS 上工作 :fixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65615999/

相关文章:

css - 为什么这个 CSS flexbox 示例不能在 IE 11 上运行?

css - 根据以下元素将样式应用于 CSS 中的元素

html - css 改变 z-index 不受影响

javascript - 滚动时视差图像非常不稳定

javascript - 使用 useEffect 操作 DOM 事件在不同屏幕上不响应

html - 将 CSS 的边距归零是一个好习惯吗?

javascript - 使用 JavaScript 读取 HTML 表格

javascript - 导入Div时,如何通过JavaScript查找当前HTML的名称?

javascript - HTML Doctype 导致视频自动播放而不滚动到

javascript - 视差 - 由于绝对定位,页面末尾不可见