如何解决移动设备上的全屏背景图像问题？-css教程-PHP中文网

如何解决移动设备上的全屏背景图像问题？

Susan Sarandon

发布： 2024-12-05 21:06:14

原创

162 人浏览过

How to Fix Full-Screen Background Image Issues on Mobile Devices?

修复移动设备上的背景图像问题

创建背景图像延伸到全屏的网页时，保持其宽高比，并且在滚动期间保持固定，可能会使用如下 CSS 代码：

HTML {
  background: url(photos/2452.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

登录后复制

但是，应用如果滚动得足够远，此代码在移动设备（例如 iPhone 或 iPad）上可能会导致背景图像变得过大并重复。

解决方案在于创建一个“before”伪元素作为 HTML 正文的一部分，如下所示：

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;
}

登录后复制

确保“before”伪元素的 z-index 值设置为负数（例如， -10)，因为 HTML 根元素的默认 z-index 为 0。此负值将背景置于最低层。