使用 CSS 修复了移动设备的背景图像

Question

使用 @media 和 CSS 来修复背景图像。逻辑告诉我这应该可以工作，但是在实施后我没有得到任何改变的结果。我也包含了我正在努力覆盖的body 代码。

手机：

@media (min-width: 768px) {
   body {
     background-position: center;
     background-attachment: fixed;
   }
}

桌面：

body {
   height: 100%;
   background-image: url('../design/image.jpg');
   background-repeat: no-repeat;
   background-color: #333;
   background-position: center;
   background-size: cover;
}

Answer 1

background-attachment: fixed; 不适用于移动 webkit。有一个解决方法，你可以将图片内联在html中，设置位置固定和内容下方的z-index。

这是相关的Using background-attachment:fixed in safari on the ipad