如何在没有 JavaScript 的情况下修复移动设备上的全屏背景图像重复？

故障排除背景：修复移动设备上的无重复问题

问题：

用户在实施完整的操作时面临困难在移动设备（iPhone 和 iPad）上具有固定位置的屏幕背景图像。尽管使用 CSS 进行背景样式，但图像看起来过大，并且向下滚动时往往会重复。

解决方案：

为了解决此问题，一种新颖的解决方案的出现消除了对 JavaScript 的需求。引入新的 CSS 代码段：

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

说明：

• body:before 伪元素在 HTML 文档正文之前创建一个附加元素.
• 绝对定位确保元素相对于元素保持在固定位置视口。
• 负 z 索引 (-10) 使元素能够出现在页面常规内容的后面。
• 背景图像、其位置、缩放和固定与用于桌面浏览器的原始 CSS。

需要注意的是，这种技术是无供应商前缀的，消除了跨浏览器兼容性问题。

以上是如何在没有 JavaScript 的情况下修复移动设备上的全屏背景图像重复？的详细内容。更多信息请关注PHP中文网其他相关文章！