Question

我的一位朋友设置了一个小页面，并在移动设备（Chrome）上问我一个问题。背景图像（在正文上）设置为覆盖

body {
background-image: linear-gradient(135deg, rgba(14, 113, 184, 0.8) 0%, rgba(28, 22, 53, 0.6) 100%), url("../img/bgvid.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

背景图像将在完整视口内渲染，但如果我向下滚动，它会被切割下来，检查下面的图像以查看我的意思（灰色块）。他正在寻求我的帮助，但我真的不知道是什么原因造成的。我试图移除页脚（并将体高设置为100％），但它没有改变任何东西。

解决

修复：看起来固定背景不适用于移动浏览器。这修好了它：

background-attachment: scroll;

Answer 1

CSS background image to fit width, height should auto-scale in proportion

body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

移动设备上的背景图片无法显示全高

解决

1 个答案: